el-upload subcomponent content
<template>
<div class="component-upload-image">
<el-upload multiple
drag
:action="uploadImgUrl"
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="limit"
:http-request="upLoad"
:on-error="handleUploadError"
:on-exceed="handleExceed"
ref="imageUpload"
:on-remove="handleDelete"
:show-file-list="true"
:auto-upload="false"
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{hide: this.fileList.length >= this.limit}">
<i class="el-icon-plus"></i>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip"
slot="tip"
v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{
{
fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{
{
fileType.join("/") }}</b> </template>
的文件
</div>
<el-dialog :visible.sync="dialogVisible"
title="预览"
width="800"
append-to-body>
<img :src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto" />
</el-dialog>
</div>
</template>
<script>
import {
getToken } from "@/utils/auth";
import {
uploadImg } from "@/api/tools/uploadImg.js"
export default {
props: {
value: [String, Object, Array],
// 图片数量限制
limit: {
type: Number,
default: 1,
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["png", "jpg", "jpeg"],
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true
}
},
data () {
return {
number: 0,
uploadList: [],
dialogImageUrl: "",
dialogVisible: false,
hideUpload: false,
baseUrl: process.env.VUE_APP_BASE_API,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
fileList: [],
tempIndex: 0
};
},
created () {
},
watch: {
value: {
handler (val) {
if (val) {
// 首先将值转为数组
const list = Array.isArray(val) ? val : this.value.split(',');
// 然后将数组转为对象数组
this.fileList = list.map(item => {
if (typeof item === "string") {
if (item.indexOf(this.baseUrl) === -1) {
item = {
name: this.baseUrl + item, url: this.baseUrl + item };
} else {
item = {
name: item, url: item };
}
}
return item;
});
} else {
this.fileList = [];
return [];
}
},
deep: true,
immediate: true
},
},
computed: {
// 是否显示提示
showTip () {
return this.isShowTip && (this.fileType || this.fileSize);
},
},
methods: {
// 上传前loading加载
handleBeforeUpload (file) {
let isImg = false;
if (this.fileType.length) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
isImg = this.fileType.some(type => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
} else {
isImg = file.type.indexOf("image") > -1;
}
if (!isImg) {
this.$modal.msgError(`文件格式不正确, 请上传${
this.fileType.join("/")}图片格式文件!`);
return false;
}
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$modal.msgError(`上传头像图片大小不能超过 ${
this.fileSize} MB!`);
return false;
}
}
this.$modal.loading("正在上传图片，请稍候...");
this.number++;
},
// 文件个数超出
handleExceed () {
this.$modal.msgError(`上传文件数量不能超过 ${
this.limit} 个!`);
},
// 上传成功回调
handleUploadSuccess (res, file) {
if (res.code === 200) {
this.uploadList.push({
name: res.fileName, url: res.fileName });
this.uploadedSuccessfully();
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.imageUpload.handleRemove(file);
this.uploadedSuccessfully();
}
},
// 删除图片
handleDelete (file) {
const findex = this.fileList.map(f => f.name).indexOf(file.name);
if (findex > -1) {
this.fileList.splice(findex, 1);
this.$emit("input", this.listToString(this.fileList));
}
},
// 上传失败
handleUploadError () {
this.$modal.msgError("上传图片失败，请重试");
this.$modal.closeLoading();
},
// 上传结束处理
uploadedSuccessfully () {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
// this.$modal.closeLoading();
}
},
// 预览
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 对象转成指定字符串分隔
listToString (list, separator) {
let strs = "";
separator = separator || ",";
for (let i in list) {
if (list[i].url) {
strs += list[i].url.replace(this.baseUrl, "") + separator;
}
}
return strs != '' ? strs.substr(0, strs.length - 1) : '';
},
//主要逻辑结构如下
//手动上传
submitUpload () {
this.$refs.imageUpload.submit();
},
upLoad (item) {
let FormDatas = new FormData()
FormDatas.append('file', item.file);
this.uploadImg(FormDatas, item)
},
uploadImg (FormDatas, item) {
uploadImg(FormDatas).then(res => {
this.number++;
this.handleStart(res, item)
})
},
// 处理数据
handleStart (rawFile, fileres) {
rawFile.uid = Date.now() + this.tempIndex++;
let file = {
status: 'success',
name: rawFile.fileName,
size: rawFile.size,
percentage: 0,
uid: rawFile.uid,
raw: fileres.file,
url: rawFile.fileName,
response: rawFile
};
// 调用若依本身的上传成功所需要的函数传入内容
this.handleUploadSuccess(rawFile, file)
if (this.listType === 'picture-card' || this.listType === 'picture') {
try {
file.url = URL.createObjectURL(rawFile);
} catch (err) {
console.error('[Element Error][Upload]', err);
return;
}
}
}
}
};
</script>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {
display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
transition: all 0s;
}
::v-deep .el-list-enter,
.el-list-leave-active {
opacity: 0;
transform: translateY(0);
}
::v-deep .el-upload-dragger {
width: auto;
height: auto;
}
</style>
The parent component calls the paste event
<el-form-item label="图片"
prop="pic"
@paste.native.capture.prevent="handlePaste">
<ImgUpload v-model="form.pic"
:isShowTip="false"
ref="ImgUpload" />
</el-form-item>
// 粘贴事件
handlePaste (e) {
// 粘贴事件处理数据
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
var items = '';
items = (e.clipboardData || window.clipboardData).items;
let file = null;
if (!items || items.length === 0) {
this.$message.error('当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！');
return;
}
// 搜索剪切板items
for (let i = 0; i < items.length; i++) {
// 限制上传文件类型
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
// 根据upLoad 方法处理所需要的数据， 此方法的参数可以在子组件中打印出来
let item = {
}
item.file = file
this.$refs.ImgUpload.upLoad(item)
}
}
Article reference:
Extend the element-ui el-upload component to realize copying and pasting uploaded image files, with image preview function