vue + elementUI 项目里使用qiniu插件实现上传图片功能
总结：按照七牛官网一步步来就可以实现。
官网链接：https://developer.qiniu.com/kodo/sdk/1283/javascript
具体实现步骤：
1、npm 安装qiniu依赖
npm install qiniu-js2、npm 安装 plupload依赖
npm install plupload --save3、在上传页面引入插件依赖
var qiniu = require('qiniu-js') 
4、DOM部分：
el-upload控件的 ：http-request="qiniuUpload" 绑定上传图片函数；
:limit="addEditDialog.limit" 限制图片的数量
:disabled="addEditDialog.uploadDisabled" 禁用上传图片插件
:before-upload="beforeUpload" 上传前的钩子函数
:on-remove="onRemove" 移除图片函数
:on-preview="handlePictureCardPreview" 图片放大查看函数
![]()
5、js部分：
beforeUpload()
qiniuUpload()
getImagekey()
handlePictureCardPreview()
onRemove()
//上传图片
beforeUpload(file) {//图片上传前的钩子,对图片进行限制
const isJPG = file.type === 'image/jpeg' || 'image/jpg' || 'image/png';
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isJPG) {
//_this.$message.error('上传头像图片只能是 jpeg/jpg/png 格式!');
_this.$message({
message: "上传头像图片只能是 jpeg/jpg/png 格式!",
type: 'error',
duration:1500,
showClose: true,
});
}
if (!isLt2M) {
//_this.$message.error('上传头像图片大小不能超过 5MB!');
_this.$message({
message: "上传头像图片大小不能超过 5MB!",
type: 'error',
duration:1500,
showClose: true,
});
}
return isJPG && isLt2M;
},
qiniuUploadCover(event){
/* 新增和编辑时上传图片到七牛都调用此方法，参数要求：
新增：paramObj：{key:"tmp_bj_" + Date.parse(new Date()),url:""}
编辑：paramObj：_this.getImagekey(_this.oldPicUrl);
*/
//console.log(_this.oldPicUrl);debugger
var paramObj=_this.getImagekey(_this.oldPicUrl);
uptokencover(paramObj).then(res => {
if(res.code==0){
var qiniu_token = res.data.uptoken;
/* file: blob对象，上传的文件;
key: string, 文件资源名
token: string, 上传验证信息，前端通过接口请求后端获得
putExtra: object,
config: object
*/
var putExtra={
fname: "",//文件原文件名
params: {},//用来放置自定义变量
mimeType: ["image/png", "image/jpeg", "image/gif"],//用来限定上传文件类型，指定null时自动判断文件类型。
}
var config={
useCdnDomain: true,//表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
region: qiniu.region.z2,//选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
}
var observable = qiniu.upload(event.file, paramObj.key, qiniu_token, putExtra, config);
var subscription = observable.subscribe({
next(res){
// next: 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、total、percent三个属性，提供上传进度信息。
//console.log(res);
},
error(err){
// 上传错误后触发，当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 为一个包含 code、message、isRequestError 三个属性的 object
//console.log(err);
},
complete(res){
//console.log(res);
// 接收上传完成后的后端返回信息，res 参数为一个 object， 为上传成功后后端返回的信息，具体返回结构取决于后端sdk的配置
/*
if(_this.addEditDialog.dialogShow){
_this.editForm.rmHeadimage="http://image.qxdaojia.com/"+paramObj.key+"?v="+Date.parse(new Date());
_this.addEditDialog.uploadDisabled=true;
}
if(_this.addDialog.dialogShow){
_this.addForm.rmHeadimage="http://image.qxdaojia.com/"+paramObj.key+"?v="+Date.parse(new Date());
_this.addDialog.uploadDisabled=true;
}
*/
}
}) // 上传开始
}else{
_this.$message({
message: res.message,
type: 'error',
duration:1500,
showClose: true,
});
}
});
},
getImagekey(url){/*图片得到中间的key*/
var key="tmp_bj_" + Date.parse(new Date());
var count="0";
if(url!=""){
if(url.indexOf("http://image.qxdaojia.com")>=0){
if(url.indexOf("?")>=0){
key=url.substring(26).substring(0,url.substring(26).lastIndexOf("?"));
count="1";//覆盖
}else{
key=url.substring(26);
count="1";//覆盖
}
}
}
//其中覆盖时,key与url相等,普通上传时,url为空,key为上传的key
return {key:key,url:count=="0"?"":key};
},
handlePictureCardPreview(file) {//查看图片
_this.editForm.rmHeadimage = file.url;
console.log(_this.editForm.rmHeadimage);
_this.addEditDialog.dialogVisible = true;
},
onRemove(file, fileList) {//移除upload控件的图片url
_this.oldPicUrl =_this.editForm.rmHeadimage;
_this.editForm.rmHeadimage="";
_this.imgFileList=[];
//删除图片后，upload控件取消禁用。
_this.addEditDialog.uploadDisabled=false;
},