前言
这是使用element-ui中的el-upload进行上传的,但是吧,预览是自定义的组件,所以多选会有些麻烦,因为file-list的参数,具体参考例子来讲吧
一、单张图片的上传
// 这是自定义的图片预览的组件,pictureList就是上传的图片
<image-list :pictureList.sync="pictureList"
@preview="onPreview"></image-list>
// 这是上传的标识,当图片大于9张就不允许其上传了,就没有上传的按钮啦。下面的代码也会调用on-exceed,有提示
<el-upload v-if="pictureList.length < 9"
ref="upload"
class="image-upload"
:limit="limit"
:accept="accept"
:multiple="multiple"
:action="uploadUrl"
:headers="headers"
:data="data"
:show-file-list="showFileList"
:file-list="pictureList"
list-type="picture-card"
:before-upload="handleBeforeUpload"
:on-exceed="handleExceed"
:on-success="handleSuccess">
<i class="el-icon-plus"
v-loading.fullscreen.lock="uploading"
element-loading-text="正在上传,请稍等..."></i>
<!--<span slot="tip" class="el-upload-tip">只能上传 jpg/png 文件,且不超过 {{ maxSize }} MB</span>-->
</el-upload>
// 图片上传之前
handleBeforeUpload(file) {
let self = this;
// 文件类型
const typeIsOk = file.type == 'image/jpeg' || file.type == 'image/png';
// 文件大小
const sizeIsOk = file.size / 1024 / 1024 < self.maxSize;
if (typeIsOk && sizeIsOk) {
self.uploading = true;
}
if (!typeIsOk) {
self.$message.error('只能上传 jpg/png 文件!');
}
if (!sizeIsOk) {
self.$message.error('单个图片大小不能超过 ' + self.maxSize + 'MB!');
}
return typeIsOk && sizeIsOk;
},
// 文件超出个数限制时
handleExceed() {
let self = this;
self.$message.error('最多只能上传' + self.limit + '张图片!');
},
// 图片上传成功
handleSuccess(response) {
let self = this;
self.uploading = false;
if (response.success) {
if (Object.keys(response.result).length > 0) {
let picture = response.result;
if (JSON.stringify(self.pictureList).indexOf(JSON.stringify(picture)) == -1) {
self.pictureList.push(picture);
}
self.$message.success('图片上传成功!');
// 图片列表
self.$emit('update:pictureList', self.pictureList);
// 图片上传成功
self.$emit('uploadSuccess', self.pictureList);
}
} else {
self.$message({
showClose: true,
duration: 10000,
message: response.data + '!',
type: 'error'
});
// 清空文件列表
self.$refs['upload'].clearFiles();
// 更新上传的文件
self.$emit('update:pictureList', []);
}
},
// 预览图片
onPreview(pictureList) {
let self = this;
self.$emit('previewImage', pictureList);
}
二、一次上传多张图片
html的代码都是类似的,唯一的区别是file-list,其参数名不能跟图片列表的参数名一致,不然图片列表不能进行push,从而不能预览。
因为项目需要,有新增和编辑,所以需要一个editUpload进行图片的深拷贝,作为编辑的时候已上传的数据,以此来控制总数据量便于数量限制
代码如下:
// uploadArr每次打开新增/编辑都要传空过来,就相当于清空fileList
:file-list='uploadArr'
// 需要写在handleBeforeUpload里面
// 获取第一次进来的数据,用于统计已上传的数据,即编辑
if (this.editFirstFlag1) {
// editUpload 仅用以计算用户可上传的图片数量;需要传给图片列表(删除再图片列表组件中进行)并实时更新
this.editUpload = this.pictureList.map(i => JSON.parse(JSON.stringify(i)))
this.editFirstFlag1 = false
}
// 文件超出个数限制时
handleExceed() {
let self = this;
if(this.editLength == 0){
self.$message.error('最多只能上传' + self.limit + '张图片!');
}else {
self.$message.error('已有'+this.editLength+'张图片,此次最多只能上传' + self.limit + '张图片!');
}
},
mounted() {
// 每次调用组件都要执行,使用v-if强制组件更新;所以editFirstFlag必须是父组件传递过来的true
this.editFirstFlag1 = this.editFirstFlag
},
computed: {
editLength(){
// 编辑的时候已上传的数据
return this.editUpload.length
},
},
watch: {
editLength:{
immediate:true,
handler(newVal, oldVal) {
let self = this
// 限制图片上传数量的
this.limit = 9 - newVal
// console.log(this.limit)
}
}
},