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
        }
    },

最后

以上就是可爱母鸡为你收集整理的elment 上传文件 文件列表回显的全部内容，希望文章能够帮你解决elment 上传文件 文件列表回显所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。