vue 文件上传和下载（blob）

最新推荐文章于 2025-04-29 13:21:39 发布

原创最新推荐文章于 2025-04-29 13:21:39 发布

· 1.9k 阅读

5 ·

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在Vue中处理文件上传和下载。通过HTTP请求实现文件上传，并使用Blob技术进行文件下载的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件上传

请求

// 上传文件接口
export function upFile(data) {
  return request({
    url: '/ruo/file/upload',
    method: 'post',
    data
  })
}

代码

		// 创建一个formData对象
		var formData = new FormData()
        formData.append('file', form.file)
        // 上传接口
        upFile(formData).then((res) => {
        // 上传文件ID 和其他数据一起跟随新增接口传给后台 
          form.fileId = res.fileId
          saveUp(form).then(() => {
            this.$refs.pdmEdit.hide()
            this.$message.success('修改成功!')
            })
      	})

文件下载

// 下载文件接口
export function downloadPdm(data) {
  return request({
    url: '/ruo/file/downloadFile',
    method: 'get',
    params: data,
    responseType: 'blob'
  })
}

	// 写法一
	downloadPdm({ id: data.id }).then(res => {
        const fileName = decodeURIComponent(res.headers['content-disposition'].split('=')[1])
        const link = document.createElement('a')
        link.download = fileName
        // 创建URL对象.
        link.href = URL.createObjectURL(new Blob([res.data]))
        document.body.appendChild(link)
        link.click()
        // 释放一个通过URL.createObjectURL()创建的对象URL.
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
    })
    // 写法二
    downloadPdm({ id: data.id }).then(res => {
        const fileName = decodeURIComponent(res.headers['content-disposition'].split('=')[1])
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(new Blob([res.data]))
        link.target = '_blank'
        // 文件名和格式
        link.setAttribute('download', fileName + '.apk')
        link.click()
        document.body.removeChild(link))
    })