elment 上传文件 文件列表回显
<el-upload drag action="https://jsonplaceholder.typicode.com/posts/" :before-upload="beforeUpload" :on-preview="Previewf" :on-exceed='changeFile' :on-remove='deleteFile' :file-list="fileList" :limit="3" :http-request="getFileVideo" multiple>
<i class="el-icon-upload">i>
<div class="el-upload__text">将文件拖到此处，或 <em>点击上传em>div>
el-upload>
changeFile(){
this.$notify({
title: '提示',
message:'最多只能上传3个附件',
type: 'warning',
duration:900,
});
},
beforeUpload(file){
if (file.size > 10485760) {
this.$notify({
title: '提示',
message:'不能上传大于10M的文件',
type: 'warning',
duration:900,
});
return false //必须返回false
}
},
deleteFile(val){
this.fileList.forEach((item, index) => {
if (item.id == val.id) {
this.fileList.splice(index, 1);
}
})
},
Previewf(file){
console.log(file)
// let listArr=file.url.split('.');
// console.log(listArr)
// let fileType=file.url.substring(file.name.lastIndexOf('.') + 1)
// console.log(fileType)
// if(type =='')
},
getFileVideo(file){
const fileData = new FormData();
fileData.append("file", file.file);
fileData.append("prefix",'dataset' );
apiFileUploadFile(fileData).then((res) => {
if (res.success) {
this.fileList.push( {
name:config.fileService+'file/'+res.data,
id: this.$makeRandom(1, 1000),
url: config.fileService+'file/'+res.data
})
}
})
},
//回显数据时
getInfo(val){
apiEventConclusionGet({id:val}).then((res)=>{
if(res.success){
this.formData=res.data;
this.formData.accessory && this.formData.accessory.split(',').forEach(i=>{
let ob = {
name:i,
id: this.$makeRandom(1, 1000),
url: i
}
this.fileList.push(ob)
})
this.currentEvent={
title:this.formData.eventName,
id:this.formData.eventReceiveId
};
this.centerPoint=[res.data.longitude, res.data.latitude];
}
})
},
beforeUpload 是在上传前判断文件大小，Previewf 可以用于回显（这次项目暂时没用到 就没写），changeFile 是在选择文件时判断数量，deleteFile 用于删除文件列表的文件，fileList 是要用于展示的上传文件列表， limit 文件上传数量限制 getFileVideo自定义文件上传。
getInfo 在编辑时回显文件列表 需要把数据重新转成一个数组。
emm 大多数文件都可以根据后端返的文件地址直接下载，但是txt 有问题 ，就需要单独处理
完整代码如下
ckFile(val){
let fileType=val.substring(val.lastIndexOf('.') + 1);
let result=this.$formatFileType(fileType);
if(result ==='img'){
this.dialogImageUrl=val;
this.imgDialogVisible=true;
}else if(result ==='video'){
this.dialogVideoUrl=val;
this.imgDialogVisible=false;
this.dialogVideoUrl=true;
}
else if(result==='text'){
var downloadFile = function(val){
let a = document.createElement('a');
a.href = 'data:text/plain;charset=UTF-8,' + '' + val;
a.download = val.substr(val.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
downloadFile(val)
} else{
let a=document.createElement('a') //创建一个a标签元素
a.style.display='none' //设置元素不可见
a.href=val //设置下载地址
document.body.appendChild(a) //加入
a.click() //触发点击,下载
document.body.removeChild(a) //释放
}
},
这个是方法
// 文件类型判断
Vue.prototype.$formatFileType = function (type) {
type = type.toUpperCase()
if (['TXT'].includes(type)) {
return 'text'
}
else if (['PDF'].includes(type)) {
return 'pdf'
}
else if (['HTML', 'HTM'].includes(type)) {
return 'link'
}
else if (['DOC', 'DOCX'].includes(type)) {
return 'word'
}
else if (['XLS', 'XLSX'].includes(type)) {
return 'excel'
}
else if (['PPT', 'PPTX'].includes(type)) {
return 'ppt'
}
else if (['JPG', 'JPEG', 'PNG','BMP','WEBP','GIF'].includes(type)) {
return 'img'
}else if(['mp4','mov','mpeg'].includes(type)){
return 'video'
}else if(['mp3','wav'].includes(type)){
return 'mp3'
}
else {
return false
}
},