记 js 上传下载细节

上传

<input type="file" ref="inputFile" accept=".xls,.xlsx" @change="readFile($event)" style="display: none" />

打开文件选择框

 clickInput() {
      this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))
  },

js

 //上传
    async readFile(e) {
      const files = e.target.files
      if (files.length <= 0) {
        return
      } else if (!/(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$message.warning('上传格式不正确，请上传xls、xlsx格式')
      }
      const form = new FormData()
      form.append('risenUpload', files[0])
      let result = await demoUpload(form)
      if (result.success) {
        this.$message.success('上传成功')
      } else {
        this.$message.error(result.actionErrors[0])
      }
    },

上传文件需要添加

 headers: {
      'Content-Type': 'multipart/form-data'
 },

 

下载

 XMLHttpRequest

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.baidu.com')
xhr.send()

xhr.onload = function () {
  const blob = new Blob([xhr.response], { type: 'text/html' })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'baidu.html'
  a.click()
}

这里主要的逻辑是当我们的请求成功后，我们会拿到响应体的response，这个response就是我们要下载的内容，然后我们把它转换成blob对象，然后通过URL.createObjectURL来创建一个url，然后通过a标签的download属性来实现文件下载。

这里的知识点就有两个，一个是blob对象，一个是URL.createObjectURL。

第一个可以和接口提供者进行协商，协商方案是不确定的，第二就是通过response的header来获取文件的type，也是我们要讲的：

const type = response.headers['content-type']
const blob = new Blob([response.data], { type })

这里我们通过response的header来获取type，然后再创建blob对象，这样就可以正确的下载文件了。

其实content-type也可能是application/octet-stream，这个时候我们就需要通过file-type来获取文件的type了。

下面的代码是通过file-type来获取文件的type：

import {fileTypeFromStream} from 'file-type';
const type = await fileTypeFromStream(response.body);
const blob = new Blob([response.data], { type })

 

window.open    方法

  window.open(接口地址, '_self')

创建a标签点击 下载  切记 接口 配置添加 responseType 

export function downDemoTemplate(params) {

  return request({

    url: '/downDemoTemplate',

    method: 'get',

    responseType: 'blob',

    params

  })

}

downDemoTemplate().then(res => {
        let blob = new Blob([res])
        let fileName = '范例.xls'
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(blob, fileName)
        } else {
          let URL = window.URL || window.webkitURL
          let objectUrl = URL.createObjectURL(blob)
          if (fileName) {
            var a = document.createElement('a')
            if (typeof a.download === 'undefined') {
              window.location = objectUrl
            } else {
              a.href = objectUrl
              a.download = fileName
              document.body.appendChild(a)
              a.click()
              a.remove()
            }
          } else {
            window.location = objectUrl
          }
        }
      })

下载失败处理

如果下载失败，想要获取失败信息，则需要将blob流转为json

var reader = new FileReader()
reader.onload = e => console.log(JSON.parse(e.target.result))
reader.readAsText(blob)

 

FileReader预览本地文件

  beforeUpload(data) {
      this.getBase64(data, url => {
        this.cardBackImg = url
      })
      return true
    },

 

   getBase64(img, callback) {
      const reader = new FileReader()
      reader.addEventListener('load', () => callback(reader.result))
      reader.readAsDataURL(img)
    },