1.template
<template>
<div>
<el-upload
class="avatar-uploader"
ref="upload"
multiple
:auto-upload="true"
:action="domain"
:limit="10"
accept="image/jpeg,image/png,image/bmp,image/jpg"
:file-list="fileList"
:show-file-list="true"
:data="QiNiuYun"
:on-preview="picCardPreview"
:before-upload="beforePicUpload"
:on-exceed="handleExceed"
:on-remove="removePic"
:http-request="uploadQiniu"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-dialog append-to-body :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
2.script
<script>
import axios from "axios";
export default {
data() {
return {
dialogVisible: false,
QiNiuYun: {
//上传图片携带的参数
token: "",
key: "",
},
domain: "",
fileList: [],
dialogImageUrl: "",
};
},
},
methods: {
//上传图预览
picCardPreview(file, fileList) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//图片校验
beforePicUpload(file) {
const limitPic =
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/jpeg" ||
file.type === "image/bmp";
if (!limitPic) {
this.$notify.warning({
title: "警告",
message: "请上传格式为image/png,image/jpg,image/jpeg,image/bmp的图片",
});
}
const limitSize = file.size / 1024 / 1024 / 2 < 2;
if (!limitSize) {
this.$notify.warning({
title: "警告",
message: "图片大小必须小于2M",
});
}
return limitPic && limitSize;
},
//文件超出个数限制
handleExceed() {
this.$notify.warning({
title: "警告",
message: "一次只能上传十张图片",
duration: 2000,
});
},
//移除图片
removePic(file, fileList) {
this.fileList = fileList;
},
//上传七牛云
uploadQiniu(request) {
this.handleUpload(request)
.then((res) => {
if (res) {
console.log("success", res);
} else {
this.$message.error({
message: "图片上传失败,请重新上传",
duration: 2000,
});
}
})
.catch((err) => {
this.$message.error({
message: `图片上传失败${err}`,
duration: 2000,
});
});
},
handleUpload(request) {
const promise = new Promise((resolve, reject) => {
let fileType = "";
if (request.file.type === "image/jpg") {
fileType = "jpg";
} else if (request.file.type === "image/png") {
fileType = "png";
} else if (request.file.type === "image/jpeg") {
fileType = "jpeg";
}
//自定义图片名
const key = `front_${new Date().getTime()}${Math.floor(
Math.random() * 100
)}.${fileType}`;
// 获取token
this.$request("getToken", { fileName: key })
.then((res) => {
this.domain = res.domain;
const fd = new FormData();
fd.append("file", request.file);
fd.append("token", res.uptoken);
fd.append("key", res.filePath);
const config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
axios
.post(this.domain, fd, config)
.then((res) => {
if (res.status == 200 && res.data) {
let a = {
path: res.data.key,
photoRemark: "",
};
resolve(res);
} else {
reject(res);
}
})
.catch((err) => {
this.$message.error({
message: `上传失败[${err.status}]`,
duration: 2000,
});
});
resolve(true);
})
.catch((err) => {});
});
return promise;
},
}
</script>