前端实现文件流上传下载

1、请求文件流，并下载

1.1、 请求文件流

request({
    url:'/file/download',
    method:'post',
    responseType:'blob',//该参数一定要加，不然无法获取文件
    data:{id:'1'}//参数，当然这个看接口定义
}).then(res=>{

}).catch(err=>{
})

1.2、 下载文件流

  request({
    url:'/file/download',
    method:'post',
    responseType:'blob',
    data:{id:'1'}
}).then(res=>{
    const content = res.data
    const blob = new Blob([content], { type: "application/zip" })
    const fileName = 'download.zip'
    const elink = document.createElement('a')
    if ('download' in elink) { // 非IE下载
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = window.URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        window.URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
    } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName)
    }
})

2、文件流上传

2.1 选取本地文件

利用表单的type为file选取本地文件

<template>
  <div>
    文件压缩上传案例
    <label name="myfile" for="myfile" 
      :class="{'is-dragover': dragover}"
      @drop.prevent="onDrop"
      @dragover.prevent="onDragover"
      @dragleave.prevent="dragover = false">
      <input type="file" id="myfile" multiple  webkitdirectory  @change="selectFile" />
    </label>
  </div>
</template>
 
<script>
import JSZip from 'jszip'
import axios from 'axios'

export default {
  data () {
    return {
      dragover: false
    }
  },
  methods: {
    selectFile (even) {
      var files = even.target.files
      this.commmon(files)
    },
    onDrop (even) {
      this.dragover = false
      var files = even.dataTransfer.files
      this.commmon(files)
    },
    //压缩上传文件
    commmon (files) {
    },
    onDragover () {
      this.dragover = true
    }
  }
}
</script>
<style lang="scss">
.is-dragover{
  border: 2px solid red !important
}
</style>

2.2 压缩文件

2.2.1 blob对象

commmon (files) {
     const blob = new Blob([files], { type: "application/zip" })
    }

压缩文件的时候刚开始的时候我利用Blob对象进行压缩，这里注意的一点是用这个方法压缩会将文件成一个文件，就是你有 file1.txt、file2.txt两个文件，压缩后会合并成一个压缩包zipFile.zip。而不是一般情况下的压缩包里面有两个文件file1.txt，flie2.txt

2.2.2 jszip压缩

上面提到问题，如果我们需要压缩多个文件呢？这里可以使用插件 jszip，来压缩。这部分使用jszip一些方法的使用，会有单独章节来说下。这里就这是介绍我在项目中的使用

当然首先你要先下载这个依赖，再引入

npm i jszip --save

commmon (files) {
      var zip = new JSZip()
      for (var i = 0; i < files.length; i++) {
        var f = files[i]
        zip.file(f.name, f)//加载文件
      }
      zip.generateAsync({ type: 'blob' })//压缩文件，异步方法，返回的是一个Promise对象
        .then(function (content) {
          /*这里的content是一个Blob对象，
          但是直接发送给后端的话是一个名‘Blob’没有后缀的文件，
          如果后端需要一个有后缀的文件，需要file对象生成新的文件对象
          */
          const newFile=new file([content],'blob.zip')
        })
    }

2.3 上传文件

commmon (files) {
      var zip = new JSZip()
      for (var i = 0; i < files.length; i++) {
        var f = files[i]
        zip.file(f.name, f)
      }
      zip.generateAsync({ type: 'blob' })
        .then(function (content) {
          const newFile=new file([content],'blob.zip')
          //上传
          let formData = new FormData()
          formData.append('file', newFile)
          axios({
            method: 'post',
            url: '/file/create',
            data: formData,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'//记得这个一定要加
            }
          })
        })
    }

2.3.1、file对象

file 对象
File() 返回一个新构建的文件对象（File）

const newFile=new file([content],'blob.zip')

附录

1、请求函数 request

import axios from 'axios'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    return config
  },
  error => {
    // do something with request error
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export default service