<!-- Vue SFC -->
<template>
<div>
<el-upload
class="upload-demo"
action=""
v-if="show"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:http-request="fileUpload"
:on-success=‘onSuccess‘
:on-exceed="onExceed"
multiple
:limit="3"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传3个文件，且单个文件不超过5MB</div>
</el-upload>
</div>
</template>
<script>
import { uploadFile,deleteFile } from "@/api/sys";
// <UploadFile :obj="fileobj" ref="UploadFile" v-if="edit" />
// fileobj:[{id:‘843030C9258049ECAE9E2281B3C2B462‘,name:‘133442none.png‘}]
export default {
name: "",
components: {},
props: ["obj",‘appendixType‘],
data() {
return {
fileList:[],id:‘‘,show:true,fileList1:[],idList:‘‘
};
},
created() {
this.idList=‘‘;
},
methods: {
// 回显
getFile(obj){
console.log(obj);
// setTimeout(()=>{
var fileArr=JSON.parse(JSON.stringify(obj))
for (var item of fileArr){
console.log(item)
item.name=item.appendixName.slice(6)
item.id=item.appendixId
if(this.idList.length>0){
this.idList=this.idList+","+item.id
}else{
this.idList=item.id
}
}
console.log(this.idList)
this.fileList=JSON.parse(JSON.stringify(fileArr))
// },500)
},
// 上传之前
beforeUpload(file){
console.log(this.obj)
if(5*1024*1024<file.size){
this.$message({
message: ‘单个文件不超过5MB!‘,
type: ‘warning‘
});
return false;
}else if(this.fileList.length>3){
this.$message({
message: ‘最多可上传3个附件!‘,
type: ‘warning‘
});
return false;
}
},
// 删除附件
handleRemove(file, fileList) {
console.log(file, fileList);
if(this.fileList1.length>0){
this.show=false
this.show=true
this.fileList=this.fileList1
}
},
//
handlePreview(file) {
// console.log(file);
},
// 限制
onExceed(files, fileList) {
this.$message.warning(`只能上传3个文件，且单个文件不超过5Mb`);
},
//删除之前
beforeRemove(file, fileList) {
// return this.$confirm(`确定移除 ${ file.name }？`);
if(5*1024*1024>file.size || file.size==undefined){
this.fileList1=[]
return this.$confirm(`确定移除 ${ file.name }？`, ‘提示‘, {
confirmButtonText: ‘确定‘,
cancelButtonText: ‘取消‘,
type: ‘warning‘
}).then(async () => {
let datVal={
fileId:file.id
};
const result = await deleteFile(file.id,datVal);
if(result.code==200){
this.$message({
message: result.message,
type: ‘success‘
});
let arr= this.idList.split(",");
let index= arr.indexOf(file.id);
console.log(index,file.id,this.idList)
arr.splice(index,1);
console.log(arr)
this.idList=arr.toString();
console.log(this.idList)
}else{
this.$message({
message: ‘删除失败‘,
type: ‘warning‘
});
this.fileList1=JSON.parse(JSON.stringify(this.fileList))
}
})
}
},
//文件上传
async fileUpload(file){
console.log(file)
let param = new FormData(); //创建form对象
param.append(‘file‘,file.file);
param.append(‘AppendixType‘,this.appendixType);
const result = await uploadFile(this.appendixType,param);
console.log(file,result,this.fileList)
this.id=result.data.id
if(this.idList.length>0){
this.idList=this.idList+‘,‘+result.data.id
}else{
this.idList=result.data.id
}
// let file=this.fileList.pop()
// file.id=result.data.id
// console.log(this.fileList)
},
// 上传成功
onSuccess(response, file, fileList){
file.id=this.id
}
},
};
</script>
<style lang="scss" scoped>
</style>
