element 上传 下载文件方法

1.结构

<el-form-item label="上传附件">
                  <el-upload
                          :disabled="true"
                          action=""
                          :file-list='attchList'
                          :http-request="uploadImages"
                          :before-upload="beforeAvatarUpload"
                          :on-change="handleChange"
                          :on-preview="handleList"//上传list点击事件
                          show-file-list
                          mulitple
                          accept=".bmp, .png, .jpg, .word, .xlsx, .xls, .ppt, .pdf, .zip, .war, .rar, .exe, .jar">
                    <el-button type="primary">上传附件</el-button>
                  </el-upload>

2.js，点击上传文件list事件：on-preview

 //上传
            beforeAvatarUpload(file) {
              if (file.size > 200 * 1024 * 1024) {
                this.$message.error('文件不能超过200M');
                return false
              }
            },
            uploadImages(val) {
              let formData = new FormData()
              //key：file与后台对应
              formData.append('file', val.file)
              http.post(
                      '/file/upload',
                      formData,
                      {
                        headers: {'Content-Type': 'multipart/form-data'}
                      }
              ).then(res => {
                if (res.status==0) {
                  let obj = {
                    appendixName: res.data.filePath,
                    appendixPath: res.data.message,
                  }
                  this.ruleForm.announceAppendixList.push(obj);
                } else {
                  this.$message.error(res.message)
                }
              }).catch((error) => {
                console.log(error)
              });
            },

//下载
          handleList(file){
            let url='/file/downLoadToLocal';
            http.get(
                    url,
                    file.url ? {filePath: file.url} : {},
                    {responseType: 'blob'}
            ).then(res => {
              let fileName = decodeURIComponent(res.headers['content-disposition'].slice(res.headers['content-disposition'].indexOf('=') + 2));
              this.downloadFile(res.data, fileName);
            })
          },

          downloadFile(content, fileName) {
                (fileName && fileName.indexOf('.') !== -1) && (fileName = fileName.slice(0, fileName.indexOf('.')));
                 const blob = new Blob([content], {
                  type: content.type
                })
                if ('download' in document.createElement('a') && navigator.userAgent.indexOf('Edge') <= -1) { // 非IE 及edge下载
                  const elink = document.createElement('a')
                  fileName && (elink.download = fileName)
                  elink.style.display = 'none'
                  elink.href = URL.createObjectURL(blob)
                  document.body.appendChild(elink)
                  elink.click()
                  URL.revokeObjectURL(elink.href) // 释放URL 对象
                  document.body.removeChild(elink)
                } else { // IE10+下载
                  fileName ? navigator.msSaveOrOpenBlob(blob, fileName) : navigator.msSaveOrOpenBlob(blob)
                }
            },