七牛ファイルアップロードの前後配置

バックエンド(Node.js)
バックエンドの役割は、フロントエンドにアップロードに必要な証明書を提供することです.
の準備を
七牛開発者アカウントを登録七牛開発者のバックグラウンドにログインし、AccessKeyとSecret Keyが作成したオブジェクトのストレージスペースアドレスを取得します.https://portal.qiniu.com/user/key
sdkインストール

 npm install qiniu --save

token生成

let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
let options = {
    scope: config.Bucket,
    expires: 7200,
    returnBody: '{"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket)","name":"$(x:name)"}'
};
let putPolicy = new qiniu.rs.PutPolicy(options);
let uploadToken = putPolicy.uploadToken(mac);

scope:ストレージスペースの名前expires:証明書の有効時間、デフォルトでは、有効期間は1時間returnBody:返されるコンテンツ、上のコードは返されるJSON形式のコンテンツuploadTokenを設定し、フロントエンドアップロードに必要なtoken
フロントエンド(vue)
sdkインストール

//  
npm install qiniu-js --save
//  
var qiniu = require('qiniu-js')
// or
import * as qiniu from 'qiniu-js'

アップロードコード

qiniuUrl:記憶領域が存在する記憶領域https://developer.qiniu.com/kodo/manual/1671/region-endpointqiniuToken:バックエンドから取得したtoken

beforeUpload(file) {
    let that = this
    let putExtra = {
        fname: file.name,
        params: {},
        mimeType: ["image/png", "image/jpeg", "image/gif"]
    };
    let observe = {
        next(res) {},
        error(err) {},
        complete(res) {}
    };
    let config = {
        useCdnDomain: true,
    };
    let observable = qiniu.upload(file, 'pageapi_' + (new Date()).valueOf() + file.name.replace(/.*\./, '.'), this.qiniuToken, putExtra, config)
    observable.subscribe(observe)
},

qiniu.upload(file:blob,key:string,token:string,putExtra:object,config:object)file:Blobオブジェクト、アップロードされたファイルkey:ファイルリソース名token:検証情報のアップロード、フロントエンドはインタフェース要求バックエンドを介してconfig:objectputExtra:
リファレンス
https://developer.qiniu.com/kodo/sdk/1289/nodejshttps://developer.qiniu.com/kodo/sdk/1283/javascript
このリンクは次のとおりです.https://blog.qianxiaoduan.com/archives/1065