文件上传与下载

[luichooy]

文件上传

创建 formData 对象

/* 1. 创建formData对象 */
const formData = new FormData()

/*
 *  2. 将要上传的文件存入到formData对象上
 *  这里假设要上传的文件是file
 */
formData.append('file', file)

/*
 *  3. 如果上传文件时有其它附带参数时
 *     如： 'name': '张三'
 *          'role': 'admin'
 */
formData.append('name', '张三')
formData.append('role', 'admin')

上传接口（以 axios 为例）

// 一定要指定'content-type'的值为'multipart/form-data',否则后端无法正确接收
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

文件下载

二进制流文件下载

根据 http 响应头中的'content-disposition'来获取后端指定文件名

/*
 *  headers['content-disposition']的格式如下：
 *  content-disposition: attachment;filename=file.xlsx
*/
function getFileName(headers) {
  const contentDisposition = headers['content-disposition']
  return contentDisposition
    ? contentDisposition.split(';')[1].split('=')[1]
    : ''
}

downloadFile 方法用来下载文件，接收参数为后端返回的 response,以及文件类型

function downloadFile = (res, type = 'application/octet-stream;charset=utf-8') {
  // 获取后端给定的文件名
  const filename = getFileName(res.headers)

  // res.data即为后端返回的二进制流，在控制台显示为一串乱码
  const blob = new Blob([res.data], { type })

  const href = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.download = filename
  link.href = href
  document.body.appendChild(link)
  link.click()
  window.URL.revokeObjectURL(href)
  document.body.removeChild(link)
}

[luichooy]

写给新手前端的各种文件上传攻略，从小图片到大文件断点续传