el-upload实现多个附件上传、编辑、下载

<template>
    <div id="wrap">
       <!-- 附件上传及编辑 -->
      	<el-upload  ref="upload" :action="uploadUrl" :headers="uploadHeaders" 
      					accept=".doc, .docx, .xlsx, .pptx, .pdf, .jpg, .png, .jpeg, .rar" multiple
    					 :on-remove="handleRemove" :on-success="fileSuccess" 
    					 :before-upload="beforeUpload"   :file-list="fileList">
                                <i class="iconfont iconupload" style="color:#0AB2F9"></i>
       	</el-upload>
       <!-- 附件查看及下载 -->
          <div class="upload">
                <div v-for="item in nameList" :key="item.id" class="upItem">
                      <span class="icon">
                     		<img src="@/assets/img/word.png" alt="" v-if="item.fileext == 'docx' || item.fileext == 'doc'" />
                       		<img src="@/assets/img/excel.png" alt="" v-if="item.fileext == 'xlsx'" />
                       		<img src="@/assets/img/ppt.png" alt="" v-if="item.fileext == 'pptx'" />
                      		<img src="@/assets/img/pdf.png" alt="" v-if="item.fileext == 'pdf'" />
                       		<img src="@/assets/img/img.png" alt="" v-if="item.fileext == 'jpg' || item.fileext == 'png' || item.fileext == 'jpeg'" />
                       </span>
                       <div class="upContent">
                            <span>{{ item.filename }}</span>
                            <a :href="'/api/' + item.path" download="files1">下载</a>
                       </div>
                 </div>
             </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            uploadUrl: '/api/doc/upload',//接口地址
            uploadHeaders: { Authorization: `${token}` },//请求头中携带token
            file_id: [],//新建附件数组
            fileList:[],//编辑附件数组
            nameList: [],//接口返回的附件详情
            href: ''//附件下载地址
        };
    },
    methods: {
        // 提交
        submit(){
               if(this.nameList.length>0){//编辑
                	let ids=this.fileList.map(item=>{
                          return item.id
                     })
               }else{//新建
                	let ids=this.file_id.map(item=>{
                       return item.id
                   })
               }
        },
        // 文件上传前类型判断
        beforeUpload(file) {
            let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
            const extension1 = testmsg === 'docx';
            const extension2 = testmsg === 'xlsx';
            const extension3 = testmsg === 'pptx';
            const extension4 = testmsg === 'pdf';
            const extension5 = testmsg === 'jpg';
            const extension6 = testmsg === 'png'; 
            const extension7 = testmsg === 'jpeg';
            const extension8 = testmsg === 'rar';
            if (!extension1 && !extension2 && !extension3 && !extension4 && !extension5 && !extension6 && !extension7&& !extension8) {
                this.$message.warining('您只能上传以下类型文件：.docx, .xlsx, .pptx, .pdf, .jpg, .png, .jpeg, .rar!');
            }
            return extension1 || extension2 || extension3 || extension4 || extension5 || extension6 || extension7|| extension8;
        },
        // 上传成功获取ID
        fileSuccess(response) {
            if(this.nameList.length > 0){
                this.fileList.push({ name: response.data.name, url: response.data.path, id: response.data.id * 1 });
            }else{
                this.file_id.push({ name: response.data.name, url: response.data.path, id: response.data.id * 1 });
            }
        },
        // 文件移除ID
        handleRemove(file) {
            if (this.nameList.length > 0) {
                this.fileList.forEach((fileItem, fileIndex) => {
                    if (file.id == fileItem.id) {
                        this.fileList.splice(fileIndex, 1);
                    }
                });
            }else{
                this.file_id.forEach((item, index) => {
                    if (item.id == file.response.data.id * 1) {
                        this.file_id.splice(index, 1);
                    }
                });
            }
        },
       // 详情
        getDetail(){
            this.nameList = res.data.attachment_id;
            this.fileShow();        
        },
        // 附件回显
        fileShow() {
            this.nameList.forEach((fileItem) => {
                let file = new Object();
                file.url = fileItem.path;
                file.name = fileItem.filename + '.' + fileItem.fileext;
                file.id = fileItem.id;
                this.fileList.push(file);
            });
        },
    },
};
</script>