官方API文档：https://developer.qiniu.com/kodo/sdk/1283/javascript
步骤：
1、前台使用vue，后台传递一个 token。
2、token ： 这个相当于一个密钥。
npm安装：npm install qiniu-js
代码实现：
<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();
},
//选择文件后触发的事件
zh_uploadFile_change(evfile){
//后端获取token
getQiniuToken().then(res=>{
var uptoken = res.data.data
var file = evfile.target.files[0] //Blob 对象，上传的文件
var key = file.name // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
let config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
region: qiniu.region.z2 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
};
let putExtra = {
fname: "", //文件原文件名
params: {}, //用来放置自定义变量
mimeType: null //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
};
var observable = qiniu.upload(file, key, uptoken, putExtra, config);
observable.subscribe({
next: (result) => {
// 主要用来展示进度
console.log(result)
},
error: (errResult) => {
// 失败报错信息
console.log(errResult)
},
complete: (result) => {
// 接收成功后返回的信息
console.log(result)
}
})
})
},
}
</script>
这里有个我基于vue+ivew封装的七牛上传组件可以参考：
https://www.jianshu.com/p/99cc99d468a4
JQ单页面实现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>
所参考的文献：
使用JS-SDK上传图片（文件）到七牛：
https://blog.csdn.net/zm06201118/article/details/80537558
Vue上传文件/图片到七牛云：
http://www.xdx97.com/#/single?bid=d83cde48-75e1-7ef7-8256-cea092850ef8
带你玩转七牛云存储——高级篇
https://m.imooc.com/article/37162
Vue2.0利用vue-resource上传文件到七牛
https://segmentfault.com/a/1190000008479698
遇到的问题：
1.运行提示o.upload.addEventListener is not a function
解决方案:(此方法不是根本解决办法，问题3的解决办法是最终解决方案)
找到node_modules/mockjs/dist/mock.js 第8308行
找到node_modules/mockjs/src/xhr/xhr.js 第216行(确保在生产模式下打包出来的代码正常使用。)
添加代码：MockXMLHttpRequest.prototype.upload = xhr.upload;
参考文章：https://github.com/nuysoft/Mock/issues/127
2.上传文件链接返回提示 no such bucket
这是后端给你的token有问题，让后端去设置一下正确的bucket再生成token给你
参考文章：https://developer.qiniu.com/kodo/sdk/1239/java
image.png
3.上传文件过程报错cannot read property 'total' of null（文件能传成功，无法获取执行成功回调，跑error回调去了）
在Mock官方看到了这句话：
image.png
这是由于vue-cli中的mockjs模块全局使用了MockXMLHttpRequest，而七牛sdk本身使用的是XMLHttpRequest按照标准来的，但是vue-cli中的mockjs模块把XMLHttpRequest覆盖拦截了，会导致对象属性访问不到，删除mockjs模块即可。
解决方法：npm uninstall mockjs 删除该模块依赖
参考文章:https://github.com/nuysoft/Mock/issues/301
