文件的上传下载以及回显

##文件下载

关键 ： 动态创建 a 标签及其点击事件 设置name 和 文件的url 二者缺一不可
添加 responseType:‘blob’ 可以将二进制流转换成正常文件 使下载的文件不乱码

  //下载文件
   download(){
       request({url:'api/meeting/download',method:'get'},{ responseType: 'blob' }).then(res=>{
          const url = window.URL.createObjectURL(new Blob([res]))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '关于印发《xxx》的通知.doc')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
       })
    },

—注意：关于印发《》的通知.doc 是文件的名称 在此处是写死的 ，正常是动态获取的 将获取过来的文件名 放到这个位置即可
##文件上传
上传 ： 关键在于 new FormData() 转换
FormData 对象：
用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString 异步上传二进制文件。

     //上传 文件
    handleUpload(params){
        let fileObj = params.file // 获取要上传的file对象 
        let fd = new FormData()
        fd.append('file',fileObj) //将文件对象添加到fd中
     //uploadFile是我引入封装好的请求后台接口的函数 将fd作为参数传递给后台
        uploadFile(fd).then(res=>{
        // 以下是我需要从后台数据获取的内容 根据自己需求自行更改
            this.enclosureId = res.enclosureId[0].id
            this.enclosuerIdAdd.push(this.enclosureId)
            this.realUrl = res.enclosureId[0].realUrl
            this.Formdata.enclosureId = this.enclosuerIdAdd
            this.$message({
                  message: res.msg,
                  type: 'success'
                });
        })
    },

—注意： 此处 上传 是基于elementui中的upload组件实现的，
但换汤不换药 主要就是用 FormData将自己上传的文件传递到后台

##文件的回显

elementui中的 upload 组件中 文件的回显 只需提供给 fileList 一个由文件名和文件路径组成的数组

     this.fileList.push({
             name:item.name,
             url:item.url
           })

   <tr>
            <td>  <span class="startrules">*</span> 上传附件</td>
            <td align="left">
                <el-form-item label="" label-width="0" class="elFormItem">
                <el-upload
                disabled
                class="upload-demo"
                action=""
                multiple
                accept=".doc,.jpg,.png,.xls,.txt"
                :limit="3"
                :file-list="fileList"  // 此处 是回显的关键
                :on-preview='downloadfile'
                title="下载">
                <!-- <el-button size="small" type="primary">上传附件</el-button> -->
                </el-upload>
            </el-form-item>
            </td>
          </tr>