前端文件上传下载与预览，文件流下载文件流预览文件流上

 element的 el-upload实现的文件上传文件下载文件预览，文件流。

<*
*url 要上传到的地址
*fileChange添加文件的时候触发的回调
*fileRemove移除文件的时候触发的回调
*handleAvatarSuccess上传成功后触发的回调
**>

<el-form-item label="上传附件：">
    <el-upload
      :action="url"
      :on-change="fileChange"
      :on-remove="fileRemove"
      :on-success="handleAvatarSuccess"
      :on-upload="false"
      class="upload-demo"
      drag
      multiple
     >
         <i class="el-icon-upload" />
         <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
         </div>
     </el-upload>
  </el-form-item>

效果：

 js代码：

    attachmentsPreview(value) {
      if (value.fileOriginName.substring((value.fileOriginName.length - 3)) == 'pdf' || value.fileOriginName.substring((value.fileOriginName.length - 3)) == 'png') { // 判断格式，目前只支持pdf和png格式预览，其他格式为下载
        const url = process.env.VUE_APP_BASE_API + '/sysFileInfo/private/preview?fileId=' + value.fileId + '&token=' + store.getters.token; // 生成预览地址
        window.open(url); // 打开新页面进行预览
        URL.revokeObjectURL(url);// 释放URL对象
      } else {
        axios
          .get(process.env.VUE_APP_BASE_API + '/sysFileInfo/publicDownload?fileId=' + value.fileId, {
            headers: { // 下载请求需要携带token，不用带token的可以注释掉 headers
              Authorization: store.getters.token
            },
            responseType: 'blob'
          })
          .then((res) => {
            const blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel'
            });
            const objectUrl = URL.createObjectURL(blob); // 生成下载链接
            const a = document.createElement('a'); // 生成a标签
            a.style.display = 'none';
            a.href = objectUrl;
            a.download = value.fileOriginName; // 指定下载文件名
            a.click();
            URL.revokeObjectURL(a.href); // 释放URL对象
            this.downloadLoading = false;
          });
      }
    },

上传成功：

 该方法可以进行多文件上传

不懂的地方欢迎留言