|
|
@@ -1,5 +1,8 @@
|
|
|
<template>
|
|
|
- <div class="multi-uploader" :class="fileList && fileList.length >= limit ? 'multi-uploader-limit' : ''">
|
|
|
+ <div
|
|
|
+ class="multi-uploader"
|
|
|
+ :class="fileList && fileList.length >= limit ? 'multi-uploader-limit' : ''"
|
|
|
+ >
|
|
|
<el-upload
|
|
|
action="/upload_image"
|
|
|
list-type="picture-card"
|
|
|
@@ -16,9 +19,16 @@
|
|
|
<i class="el-icon-plus"></i>
|
|
|
</el-upload>
|
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt/>
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt />
|
|
|
</el-dialog>
|
|
|
- <div slot="tip" v-if="showTips" class="el-upload__tip" :class="fileList.length ? 'el-upload__tip-active' : ''">{{tips}}</div>
|
|
|
+ <div
|
|
|
+ slot="tip"
|
|
|
+ v-if="showTips"
|
|
|
+ class="el-upload__tip"
|
|
|
+ :class="fileList.length ? 'el-upload__tip-active' : ''"
|
|
|
+ >
|
|
|
+ {{ tips }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -37,9 +47,13 @@ export default {
|
|
|
type: Number,
|
|
|
default: 9
|
|
|
},
|
|
|
- tips:{
|
|
|
- type:String,
|
|
|
- default:"最多添加9张作品图片"
|
|
|
+ tips: {
|
|
|
+ type: String,
|
|
|
+ default: "最多添加9张作品图片"
|
|
|
+ },
|
|
|
+ fileSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 5
|
|
|
}
|
|
|
},
|
|
|
model: {
|
|
|
@@ -56,16 +70,18 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
- value: {//深度监听,可监听到对象、数组的变化
|
|
|
+ value: {
|
|
|
+ //深度监听,可监听到对象、数组的变化
|
|
|
handler(val, oldVal) {
|
|
|
- console.log('watch1:', val)
|
|
|
- this.fileList = val
|
|
|
+ console.log("watch1:", val);
|
|
|
+ this.fileList = val;
|
|
|
},
|
|
|
deep: true //true 深度监听
|
|
|
},
|
|
|
- fileList: {//深度监听,可监听到对象、数组的变化
|
|
|
+ fileList: {
|
|
|
+ //深度监听,可监听到对象、数组的变化
|
|
|
handler(val, oldVal) {
|
|
|
- console.log('watch2:', val)
|
|
|
+ console.log("watch2:", val);
|
|
|
this.$emit("change", val);
|
|
|
},
|
|
|
deep: true //true 深度监听
|
|
|
@@ -79,12 +95,17 @@ export default {
|
|
|
beforeUpload(file) {
|
|
|
console.log("beforeUpload", file);
|
|
|
console.log("before", this.$refs.multiUploader);
|
|
|
- let fileType = file.type ? file.type : (file.raw ? file.raw.type : "");
|
|
|
- if (fileType !== "image/png" && fileType !== "image/jpg" && fileType !== "image/jpeg" && fileType !== "image/gif") {
|
|
|
+ let fileType = file.type ? file.type : file.raw ? file.raw.type : "";
|
|
|
+ if (
|
|
|
+ fileType !== "image/png" &&
|
|
|
+ fileType !== "image/jpg" &&
|
|
|
+ fileType !== "image/jpeg" &&
|
|
|
+ fileType !== "image/gif"
|
|
|
+ ) {
|
|
|
this.$message.error("请上传png,jp(e)g,gif格式的图片");
|
|
|
return false;
|
|
|
}
|
|
|
- if (file.size / 1024 / 1024 > 5) {
|
|
|
+ if (file.size / 1024 / 1024 > this.fileSize) {
|
|
|
this.$message.error("图片大小不可超过5M");
|
|
|
return false;
|
|
|
}
|
|
|
@@ -109,8 +130,8 @@ export default {
|
|
|
url: fileItem.response ? fileItem.response.filename : fileItem.url,
|
|
|
uid: fileItem.uid,
|
|
|
status: "success"
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
+ });
|
|
|
this.fileList = list;
|
|
|
} else {
|
|
|
this.$refs.multiUploader.abort(file);
|
|
|
@@ -122,13 +143,13 @@ export default {
|
|
|
url: tmpFile.response ? tmpFile.response.filename : tmpFile.url,
|
|
|
uid: tmpFile.uid,
|
|
|
status: "success"
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
this.fileList = list;
|
|
|
console.log("上传失败 abort");
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|