axios 上传/下载文件

cdn: https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js
https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js

下载文件

关键点 responseType:‘blob’

//下载文件请求
axios({
    method: 'post',
    url: '/file/download',
    data: { "id": "fileId" },
    responseType:'blob' //关键点
})
.then(response => {
    const url = URL.createObjectURL(response.data)
    const link = document.createElement('a') // 创建a标签
    link.href = url
    
    // 下载文件名一般会用响应头'content-disposition'中的filename属性值。其格式一般为：Content-Disposition: attachment; filename="filename.jpg"。
    const filename = response.headers["content-disposition"].split("filename=")[1]
    link.download = decodeURIComponent(filename) // 如果需要自定义下载文件名，则手动设置 
    
    link.click()
    URL.revokeObjectURL(url) // 释放内存
})

上传文件

关键点 ‘Content-Type’: ‘multipart/form-data’

// 上传文件
let formData = new FormData()
formData.append('file', file) // file对象 可以是从 input框获取，或者 其他ui框架回调返回。
// formData.append('file', new Blob([file], {'type': 'application/octet-stream;charset=UTF-8'}))

axios({
    method: 'post',
    url: '/file/upload',
    headers: {
        'Content-Type': 'multipart/form-data' //关键点
    },
    data: formData
}).then(response => {
    console.log(response)
})