可以先看一下官方文檔：部分細(xì)節(jié)就不贅述了！只是整理一下碰見的坑

官方文檔地址：https://developer.qiniu.com/kodo/sdk/1283/javascript#7

先貼上代碼，然后再說坑。

let file = event.target.files[0]; // 對(duì)象，上傳的文件
let key = md5(file.name); // 文件資源名
/*
* config.useCdnDomain: 是否使用 cdn 加速域名，true or false，默認(rèn)為 false。
* config.disableStatisticsReport: 是否禁用日志報(bào)告，為布爾值，默認(rèn)為false。
* config.region: 選擇上傳域名區(qū)域；當(dāng)為 null 或 undefined 時(shí)，自動(dòng)分析上傳域名區(qū)域
* config.retryCount: 上傳自動(dòng)重試次數(shù)（整體重試次數(shù)）；默認(rèn)3次（即上傳失敗后最多重試兩次）；
* config.concurrentRequestLimit: 分片上傳的并發(fā)請(qǐng)求量，number，默認(rèn)為3；
* config.checkByMD5: 是否開啟 MD5 校驗(yàn)，在斷點(diǎn)續(xù)傳時(shí)校驗(yàn)分片，默認(rèn)為 false，不開啟。
*/
let config = {
     useCdnDomain: true, 
     region: qiniu.region.z0
};

/*
* fname: string，文件原文件名.
* params: object，用來放置自定義變量;
* mimeType: null || array，用來限制上傳文件類型，為 null 時(shí)表示不對(duì)文件類型限制；
* 限制類型放到數(shù)組里： ["image/png", "image/jpeg", "image/gif"]
 */
let putExtra = {
    fname: file,
    params: {}, 
    mimeType: ["image/png", "image/jpeg", "image/gif"]
};
let observe = {
    next (res) {
        console.log('已上傳大小，單位為字節(jié)：' + res.total.loaded)
        console.log('本次上傳的總量控制信息，單位為字節(jié)：' + res.total.size)
        console.log('當(dāng)前上傳進(jìn)度，范圍：0～100：' + res.total.percent);
    },
  error (err) {
        console.log(err.code)
        console.log(err.message)
        console.log(err.isRequestError)
         console.log(err.reqId)
    },
    complete (res) {
        //完成后的操作
        //上傳成功以后會(huì)返回key 和 hash  key就是文件名了！
        console.log(res)
    }
};
//開始上傳  token 需要找后端獲取(單獨(dú)的方法)
let observable = qiniu.upload(file, key, this.upToken, putExtra, config)
let subscription = observable.subscribe(observe)

我這就這點(diǎn)代碼就可以正常上傳了。沒有封裝組件，理論上說復(fù)制過去就能用了
說說坑哈... 好像忘了點(diǎn)啥 先說記得住的，想起來了再說。

config = {
     useCdnDomain: true, 
     region: qiniu.region.z0
};

這個(gè)config 的配置，文檔說的很清楚，如果region為null || undefined 的時(shí)候自動(dòng)分析上傳區(qū)域，但是當(dāng)我設(shè)置為null的時(shí)候問題就來了，Cannot read property 'cdnUphost' of undefined，咩辦法啊，這個(gè)問題卡了很久了?。。∷灾荒芴峤还慰?！客服反饋就是地址錯(cuò)誤...
最后怎么發(fā)現(xiàn)的？？？當(dāng)然不能告訴你們，我覺得我需要去充點(diǎn)智商了！
友情提醒：qiniu.region 里面有z0、z1、z2....不行的時(shí)候可以換一個(gè)試試??！

不說了，先走一步！
老板！再給我充200的智商！