官方API文檔：https://developer.qiniu.com/kodo/sdk/1283/javascript
步驟：
1逻杖、前臺(tái)使用vue，后臺(tái)傳遞一個(gè) token凉当。
2茄靠、token ： 這個(gè)相當(dāng)于一個(gè)密鑰。
npm安裝：npm install qiniu-js
代碼實(shí)現(xiàn)：
<template>
<div class="ft-plant-upload-button">
<Button type="ghost" icon="ios-cloud-upload-outline" @click="zh_uploadFile">選擇文件</Button>
<input type="file" ref="evfile" @change="zh_uploadFile_change" style="display:none">
</div>
</template>
<script>
//七牛上傳插件
import * as qiniu from 'qiniu-js';
export default {
data(){
return{
}
},
methods: {
//選擇上傳文件
zh_uploadFile(){
this.$refs.evfile.click();
},
//選擇文件后觸發(fā)的事件
zh_uploadFile_change(evfile){
//后端獲取token
getQiniuToken().then(res=>{
var uptoken = res.data.data
var file = evfile.target.files[0] //Blob 對(duì)象屡久，上傳的文件
var key = file.name // 上傳后文件資源名以設(shè)置的 key 為主忆首，如果 key 為 null 或者 undefined，則文件資源名會(huì)以 hash 值作為資源名被环。
let config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名糙及，為布爾值，true 表示使用筛欢，默認(rèn)為 false浸锨。
region: qiniu.region.z2 // 根據(jù)具體提示修改上傳地區(qū),當(dāng)為 null 或 undefined 時(shí)，自動(dòng)分析上傳域名區(qū)域
};
let putExtra = {
fname: "", //文件原文件名
params: {}, //用來放置自定義變量
mimeType: null //用來限制上傳文件類型版姑，為 null 時(shí)表示不對(duì)文件類型限制柱搜；限制類型放到數(shù)組里： ["image/png", "image/jpeg", "image/gif"]
};
var observable = qiniu.upload(file, key, uptoken, putExtra, config);
observable.subscribe({
next: (result) => {
// 主要用來展示進(jìn)度
console.log(result)
},
error: (errResult) => {
// 失敗報(bào)錯(cuò)信息
console.log(errResult)
},
complete: (result) => {
// 接收成功后返回的信息
console.log(result)
}
})
})
},
}
</script>
這里有個(gè)我基于vue+ivew封裝的七牛上傳組件可以參考：
http://www.reibang.com/p/99cc99d468a4
JQ單頁面實(shí)現(xiàn)demo
<html>
<head>
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type='file' id='thisFile' /><br>
<input type='button' value='upload' onclick="upload()">
<br><br>
<input type='text' value='upload progress' id='progress'>
</body>
<script>
var observer = {
next(res) {
// console.log(res.total.percent)
$('#progress').val(res.total.percent);
},
error(err) {
},
complete(res) {
alert('success')
}
}
var config = {
useCdnDomain: true,
region: qiniu.region.z2
};
var file = undefined
function bindToFile() {
$('#thisFile').unbind('change').bind('change', function () {
file = this.files[0]
});
}
function upload() {
//get file extension
//TODO judge the extension
//send the ajax request
//you can deliever file extension through data
var timestamp1 = Date.parse(new Date());
var token =
'hvfoFSl-iuE5A9-XrU7fHe-Q3RfGCNPK529oGxd-:t_5FIOO-UYD9C8B4a4VWM-6-OQE=:eyJzY29wZSI6InRlc3R1cGxvYWQiLCJkZWFkbGluZSI6MTU0ODc1NTkzN30=';
var putExtra = {
fname: file.name + timestamp1,
params: {},
};
var observable = qiniu.upload(file, file.name + timestamp1, token, putExtra, config)
var subscription = observable.subscribe(observer)
}
window.onload = bindToFile;
</script>
</html>
所參考的文獻(xiàn)：
使用JS-SDK上傳圖片（文件）到七牛：
https://blog.csdn.net/zm06201118/article/details/80537558
Vue上傳文件/圖片到七牛云：
http://www.xdx97.com/#/single?bid=d83cde48-75e1-7ef7-8256-cea092850ef8
帶你玩轉(zhuǎn)七牛云存儲(chǔ)——高級(jí)篇
https://m.imooc.com/article/37162
Vue2.0利用vue-resource上傳文件到七牛
https://segmentfault.com/a/1190000008479698
遇到的問題：
1.運(yùn)行提示o.upload.addEventListener is not a function
解決方案:(此方法不是根本解決辦法，問題3的解決辦法是最終解決方案)
找到node_modules/mockjs/dist/mock.js 第8308行
找到node_modules/mockjs/src/xhr/xhr.js 第216行(確保在生產(chǎn)模式下打包出來的代碼正常使用漠酿。)
添加代碼：MockXMLHttpRequest.prototype.upload = xhr.upload;
參考文章：https://github.com/nuysoft/Mock/issues/127
2.上傳文件鏈接返回提示 no such bucket
這是后端給你的token有問題冯凹，讓后端去設(shè)置一下正確的bucket再生成token給你
參考文章：https://developer.qiniu.com/kodo/sdk/1239/java
image.png
3.上傳文件過程報(bào)錯(cuò)cannot read property 'total' of null（文件能傳成功，無法獲取執(zhí)行成功回調(diào)炒嘲，跑error回調(diào)去了）
在Mock官方看到了這句話：
image.png
這是由于vue-cli中的mockjs模塊全局使用了MockXMLHttpRequest宇姚，而七牛sdk本身使用的是XMLHttpRequest按照標(biāo)準(zhǔn)來的，但是vue-cli中的mockjs模塊把XMLHttpRequest覆蓋攔截了夫凸，會(huì)導(dǎo)致對(duì)象屬性訪問不到浑劳，刪除mockjs模塊即可。
解決方法：npm uninstall mockjs 刪除該模塊依賴
參考文章:https://github.com/nuysoft/Mock/issues/301
