<el-upload
ref="uploadRef"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:on-exceed="handleExceed"
:on-change="handleChange"
:http-request="handleFile"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
size=""
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-button @click="submitUpload" color="#1890FF" type="primary">
确认
</el-button>
声明:
fileList是回显的,不是存储
fileUPList 是真正带有附件内容的列表
//定义全局变量,也可以放data里面,这里是vue3
let fileUPList= []
let fileList= []
function handleRemove(file, fileList) {
//更新列表
this.fileList = fileList;
//针对已经上传的附件进行实时删除
if(file.id!=null){
let formData = new FormData();
formData.append("fileId",file.id)
axios({
url: 'team/removeFile',
method: 'post',
data: formData
}).then(res=>{
if(res.data.code == '200'){
ElMessage({
message: '删除成功',
type: 'success',
})
}
})
}
}
function handleExceed(files, fileList) {
//this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
}
function handleFile(file) {
//formDate.append('file', file.file);
}
function beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 20;
if (!isLt2M) {
ElMessage({message: '文件大小不能超过 20MB!', type: 'error',})
}
return isLt2M;
}
function beforeRemove(file, fileList) {
//return this.$confirm(`确定移除 ${ file.name }?`);
}
function handleChange(file, fileList){
fileUPList = fileList;
}
function distionary(){
dictQueryList({pDCode:'S_BJZT'}).then((res)=>{
sBjzts = res.data.data
show.value = true
})
}
//表单提交
const submitUpload = (e) => {
setTimeout(()=>{
let formData = new FormData()
formData.append('sXtgdbh',data.sXtgdbh)
formData.append('sXtgdzt',data.sXtgdzt)
fileUPList.forEach(file =>{
//fileIds受保护的附件 后台处理 not in
//files 新增的附件
if(file.id==null){
formData.append('fileIds', '')
formData.append('files', file.raw)
}else {
formData.append('fileIds', file.id)
formData.append('files', new File([],""))
}
})
axios({
url: 'team/upload',
method: 'post',
headers: {'Content-Type': 'multipart/form-data'},
data: formData
}).then(res=>{
if(res.data.code == '200'){
ElMessage({
message: '操作成功',
type: 'success',
})
}else{
ElMessage({
message: '操作失败',
type: 'error',
})
}
})
},1000)
}
回显原附件
fileDetail({params:{'id':id}}).then(res=>{
//[{id:1,name:"附件1.txt",...},{id:2,name:"附件2.txt",...},...]
fileList = res.data
fileList.forEach(item=>{
//新建附件对象
//item.file 原二进制文件, item.name 附件名称
let imageFile = new File(item.file, item.name);
//存储附件对象
fileUPList.push({raw:imageFile})
})
})