Vue 文件上传后的diy操作及二进制流blob文件的下载

文件上传部分

1.文件的上传
常规的文件上传是通过form表单包裹file类型的input标签进行上传,在form里面的属性中定义上传方式如post,上传地址url,或者通过如elementUI的upload模块进行一系列的上传操作.但很多时候我们并不需要用到那么多复杂功能,所以文件上传的本质应该只有两步:
(1)将本地文件上传到浏览器端
(2)将浏览器端的文件发送到对应api接口
其他的额外操作可以由自己定义.
2.具体代码
上传代码如下:

<el-button @click="upload" type="primary">上传图片</el-button>
              <input
                @change="getimg"
                accept="image/x-png, image/gif, image/jpeg, image/bmp"
                class="fileupload"
                ref="fileupload"
                type="file"
              />
upload() {
      this.$refs.fileupload.dispatchEvent(new MouseEvent('click'))
    },

file类型的input样式很丑而且很不好修改,一般的话对于其的样式优化是将input标签设置为display:none,用我们自定义的按钮或其他来绑定input的点击事件以完成上传的diy风格.

然后是获取上传文件在浏览器的地址:

 getimg() {
      let file = this.$refs.fileupload.files[0]
      this.filename = file.name
      let reader = new FileReader() //读取文件
      reader.readAsDataURL(file)
      let _this = this
      reader.onload = function() {
        _this.$refs.imgshow.src = reader.result
      }
    }

一般只有图片需要用到该功能来预览

发送api部分:

addWatermark() {
      this.fullscreenLoading = true
      let file = this.$refs.fileupload.files[0]
      let param = new FormData()
      // 将得到的文件流添加到FormData对象
      param.append('file', file, file.name)
      this.$api.search.addWatermark(param).then()
}

文件上传之后本身并不能直接和一般的数据格式发过去,所以要放在formdata类里面才能达到和包裹在form里面传输一样的效果
注:传输文件是request里面的Content-Type属性一定要是: multipart/form-data

blob下载

很多时候我们从后端接口api拿到的文件类型往往是二进制流的文件,对于这个文件我们前端无法直接下载,所以要通过几步操作
1.请求接口是要告诉接口我请求的是blob类型:responseType: 'blob'
如axios是这样的axios.post(/addWaterMark, params, { responseType: 'blob' });
2.收到请求回调时要对文件blob解析后下载
具体代码是:

if (res.status == 200) {
          let blob = new Blob([res.data])
          //将二进制流blob数据转化为js认识的blob对象
          //有时还要加上类型判别如: let blob = new Blob([res.data], {
          // type: 'application/vnd.ms-excel'
          //})
          let downloadA = document.createElement('a')
          downloadA.download = 'WM_' + this.filename
          //下载文件命名
          downloadA.href = window.URL.createObjectURL(blob)
          //获取下载路径
          downloadA.click()
}

blob类型汇总
后缀 MIME Type
.doc application/msword
.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls application/vnd.ms-excel
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt application/vnd.ms-powerpoint
.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation