html
tips::disabled='true’时 无法上传,且照片墙模式只有放大没有删除图标*
设置class为modified_是为了控制上传图标不显示(设计需要)
<el-upload v-model:file-list="files" class="upload-demo" list-type="picture-card" :class="{'modified_':!state.modified}" :auto-upload="false" accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG" :on-change="(file, fileList) => {handleUploadLitigation(file, fileList)}" :on-preview="handleClick" :multiple='true'>
<el-icon class="w109">
<Plus />
</el-icon>
</el-upload>
js
let maxFileLength = ref(0)
const handleUploadLitigation = (file, fileList) => {
let length = fileList.length;
maxFileLength.value = Math.max(length, maxFileLength.value)
setTimeout(() => {//必须使用setTimeOut
if (maxFileLength.value !== length) {
return
}
//fileList包含所有之前上传过的文件,筛选出未上传的去上传
let files = fileList.filter(item => { return !item.hasOwnProperty('code'); });
uploadFileList(files)
}, 0)
};
const uploadFileList = (files) => {
let formData = new FormData();
files.forEach(file => formData.append("files", file.raw));
formData.append("cover", true);
formData.append("fileCategory", 'NONE');
state.loading = true
uploadFileOss(formData).then((res) => {
if (res.code == 200) {
state.loading = false
let data = res.data
data.forEach((item, index) => {
files[index].code = item.code//给上传的文件新增code属性
});
}
}, () => {
state.loading = false
});
};