文件上传&下载

Wombat-

已于 2022-08-18 17:20:32 修改

阅读量369

点赞数 1

分类专栏：前端文章标签：前端

于 2022-04-10 16:19:51 首次发布

本文链接：https://blog.csdn.net/haluodepaopao/article/details/123708615

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

这篇博客介绍了JavaScript中如何实现文件的上传和下载功能。通过创建输入元素触发文件选择，使用fetch API进行POST请求上传文件，并处理响应。对于文件下载，采用fetch获取blob数据，根据浏览器特性实现文件保存。

摘要由CSDN通过智能技术生成

文件上传

// js调用
var input = document.createElement('input')
input.id = 'template-upload'
 input.type = 'file'
 input.click()
 input.onchange = () => {
   var file = input.files[0]
   var form = new FormData()
   form.append('file', file) // 第一个参数是后台读取的请求key值
   // form.append('fileName', file.name)
   templateUpload(form).then(res => {
     this.$message.success(res)
   }).catch(error => {
     this.$message.error(error)
   })
 }

// 接口
export const templateUpload = (data) => {
  return fetch({
    url: '',
    method: 'post',
    data
  })
}

文件下载

// js调用
templateDownLoad().then(res => {
   const fileName = 'xxx.xlsx'
   const blob = new Blob([res], {
     type: 'application/vnd.ms-excel;charset=utf-8'
   })
   if (navigator.msSaveBlob) {
     navigator.msSaveBlob(blob, fileName)
   } else {
     const link = document.createElement('a')
     link.href = URL.createObjectURL(blob)
     link.download = fileName
     link.click()
     URL.revokeObjectURL(link.href)
   }
 })

// 接口
export const templateDownLoad = () => {
  return fetch({
    url: '',
    method: 'get',
    responseType: 'blob'
  })
}