使用Qiniu-JavaScript-SDK上传文件至七牛云存储
一、Qiniu-JavaScript-SDK介绍
基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储，并对上传成功后的图片进行丰富的数据处理操作。
JS-SDK 兼容支持 H5 File API 的浏览器，在低版本浏览器下，需要额外的插件如 plupload，JS-SDK 提供了一些接口可以结合插件来进行上传工作。
Qiniu-JavaScript-SDK 为客户端 SDK，没有包含 token 生成实现，为了安全，token 建议通过网络从服务端获取，具体生成代码可以参考服务端 SDK 的文档。
1、参考文档
官方API文档：JavaScript SDK
基于七牛 API 开发的前端 JavaScript SDK 源码地址：https://github.com/qiniu/js-sdk
2、引入（NPM安装）
NPM 的全称是 Node Package Manager，是一个 NodeJS 包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。
$ npm install qiniu-js
二、vue项目实现
创建七牛上传组件：/src/components/chart/QiniuUpload.vue
下面代码中集成了上传进度条，及上传完成提示，还添加了已上传文件的文件名显示：
<template>
<div class="ft-plant-upload-button" :class="boxClass">
<Button class="upload-btn" type="ghost" icon="ios-cloud-upload-outline" :disabled="percent > 0 && percent < 100" @click="zh_uploadFile">{{qiniuUploadDesc}}</Button>
<div class="progress-wraper" v-if="showProgress">
<div class="progress" v-if="percent > 0 && percent < 100">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" :style="{width: percent+'%'}">
</div>
</div>
<div class="precent" v-if="percent > 0 && percent < 100">
{{percent || 0 }}%
</div>
</div>
<div class="file-name" v-else>
{{fileName}}
</div>
<input type="file" ref="evfile" @change="zh_uploadFile_change" style="display:none">
<input type="hidden" :value="qiniuKey">
</div>
</template>
<script>
import * as qiniu from "qiniu-js"
export default {
name: "QiniuUpload",
props: { // 子组件的props选项
qiniuUploadDesc: {
type: String,
default: '上传文件'
},
classroomUpload: {
default: '未知classroom'
},
filetype: {
type: String
},
boxClass: {
type: String,
default: ''
},
fileName: {
type: String
}
},
data(){
return {
queryInfo: {
limit: 10,
offset: 0,
},
token: "",
qiniuKey: "",
percent: 0,
percentText: "",
showProgress: false
}
},
methods: {
beforeImageUpload(file) { // 限制图片格式和大小
const isPng = file.type === "image/png";
const isJpeg = file.type === "image/jpeg";
const isJpg = file.type === "image/jpg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isPng && !isJpeg && !isJpg) {
this.$showDialog("警告信息", "上传图片只能是 jpg、png、jpeg 格式!");
return false; // 等同于retrun false; 不执行
} else if (!isLt2M) {
this.$showDialog("警告信息", "上传图片大小不能超过2MB！");
return false;
} else {
return true;
}
},
httpGetList: function () {
var self = this;
this.$httpGet(this.$http, "users/dataController/getUploadToken", this.$trimJson(self.queryInfo), function (ret) {
console.log('ret', ret.token);
return ret.token;
});
},
//选择上传文件
zh_uploadFile(){
this.$refs.evfile.click();
},
//选择文件后触发的事件
zh_uploadFile_change(evfile){
if (evfile){
this.showProgress = true; // 显示上传过程
//后端获取token
this.getQiniuToken().then(res=>{
console.log('res', res);
var uptoken = res;
var userno = this.$sessionUser.fetch().userno;
var timestamp = Date.parse(new Date()); // 时间戳
var file = evfile.target.files[0]; //Blob 对象，上传的文件
var key = "";
if (this.filetype === "idCodeImg") {
// 身份证照片
if (this.beforeImageUpload(file)) {
key = this.filetype + '/U' + userno + 'T' + timestamp + '/' + file.name;
} else {
return;
}
} else if (this.filetype === "cardImg") {
// 证件照片
if (this.beforeImageUpload(file)) {
key = this.filetype + '/U' + userno + 'T' + timestamp + '/' + file.name;
} else {
return;
}
} else{
// 课堂附件
this.$emit('change', file.name);
key = this.filetype + '/' + this.classroomUpload + '/U' + userno + 'T' + timestamp + '.' + file.name.split('.').pop(); // 上传后文件资源名,以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
}
let config = {
useCdnDomain: true, // 表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
region: qiniu.region.z1 // 上传域名区域（z1为华北）,当为 null 或 undefined 时，自动分析上传域名区域
};
let putExtra = {
fname: "", // 文件原文件名
params: {}, // 放置自定义变量： 'x:name': 'sex'
mimeType: null // 限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
};
// observable是一个带有 subscribe 方法的类实例
var observable = qiniu.upload(file, key, uptoken, putExtra, config);
var subscription = observable.subscribe({ // 上传开始
next: (result) => {
// 接收上传进度信息，result是带有total字段的 Object
// loaded: 已上传大小; size: 上传总信息; percent: 当前上传进度
console.log(result); // 形如：{total: {loaded: 1671168, size: 2249260, percent: 74.29856930723882}}
this.percent = result.total.percent.toFixed(0);
},
error: (errResult) => {
// 上传错误后失败报错
console.log(errResult)
},
complete: (result) => {
// 接收成功后返回的信息
console.log(result); // 形如：{hash: "Fp5_DtYW4gHiPEBiXIjVsZ1TtmPc", key: "%TStC006TEyVY5lLIBt7Eg.jpg"}
this.qiniuKey = result.data.key;
this.showProgress = false;
this.$emit('key', this.qiniuKey);
this.$emit('url', result.data.url);
}
})
})
}
},
getQiniuToken(){
return new Promise((resolve, reject)=>{
var self = this;
this.$httpGet(this.$http, "users/dataController/getUploadToken", this.$trimJson(self.queryInfo), function (ret) {
console.log('ret', ret.token);
resolve(ret.token);
});
})
}
},
mounted() {
this.$pageInit();
this.fileToken = this.$sessionUser.fetch().fileToken;
}
}
</script>
2、在父组件中引入七牛上传组件
使用props传递属性到子组件。这样可以拼接出比较复杂的文件名（key: 文件资源名）。
<template> <div class="app-content"> <section class="section"> <v-breadcrumb></v-breadcrumb> <div class="section-body"> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> <h4>编辑/添加招生学生</h4> </div> <div class="card-body"> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label for="idCardFront" class="col-md-4 col-form-label">身份证正面上传(头像)</label> <QiniuUpload id="idCardFront" filetype="idCodeImg" :qiniuUploadDesc="'上传图片'" :boxClass="'add-idImg1'" @url="setFrontUrl" :fileName="queryInfo.idImg1.split('/').pop()"> <template slot="uploadTitle"> </template> </QiniuUpload> </div> <div class="form-group row"> <label for="idCardBack" class="col-md-4 col-form-label">身份证反面上传(国徽)</label> <QiniuUpload id="idCardBack" filetype="idCodeImg" :qiniuUploadDesc="'上传图片'" :boxClass="'add-idImg2'" @url="setBackUrl" :fileName="queryInfo.idImg2.split('/').pop()"> <template slot="uploadTitle"> </template> </QiniuUpload> </div> </div> <div class="col-md-6"> <div class="form-group row"> <label for="cardType" class="col-md-3 col-form-label">学历证件</label> <div class="col-md-5 m-t-5 m-b-5"> <Enums type="card_type" id="cardType" v-model="queryInfo.cardType" placeholder="请选择证件类型"></Enums> </div> </div> <div class="form-group row"> <label for="idCardBack" class="col-md-3 col-form-label">学历证件上传</label> <QiniuUpload id="cardImg" filetype="cardImg" :qiniuUploadDesc="'上传图片'" :boxClass="'add-cardImg'" @url="setCardUrl" :fileName="queryInfo.cardImg.split('/').pop()"> <template slot="uploadTitle"> </template> </QiniuUpload> </div> </div> </div>
