接口请求附件信息上传文档和下载文档

最新推荐文章于 2025-02-26 16:16:49 发布

guoyu_vae

最新推荐文章于 2025-02-26 16:16:49 发布

阅读量589

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： vue reactjs

本文链接：https://blog.csdn.net/weixin_44233592/article/details/110877441

React 专栏收录该内容

28 篇文章

订阅专栏

这篇博客介绍了前端使用axios进行文件上传和下载的方法。上传采用multipart/form-data格式，下载则通过两种方式：一是获取下载地址后在新窗口打开，二是直接处理二进制流并触发文件下载。示例代码详细展示了实现过程。

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

上传： 
export const add=(params: any) => http.request({ method: 'post', url: '/app/helpcenter/add', params, config: { headers: { 'Content-Type': 'multipart/form-data' } } })

下载：
export const statisZanCaiExport = (data:any)=> http.request({method:'post',url:'/app/statis/statisZanCaiExport',params:data,returnAll:true,config:{responseType: 'arraybuffer'}})

上传通过formData

   const formData = new FormData()
   formData.append('file', this.file)
   formData.append('description', values.docDesc)

下载有两种方式，一个接口返回一个下载地址，二是接口返回一个二进制流的数据

（1）下载地址的方式

    downLoadHelpDocument = async (docUrlParam: string) => {
        const params = {
            docUrl: docUrlParam,
        }
        await downloadHelpDocumentUrl(params).then((res: any) => {
            if (!!res && res.retCode === 'N-000000') {
                const win = window.open(res.retData.downloadUrl, '_blank')
                if (!!win) {
                    win.location.href = res.retData.downloadUrl
                }
            }
        })
    }

（2）二进制流方式

    exportData = async () => {
        try {
            await statisZanCaiExport({ statisDate: this.state.datePickValue.format('YYYYMMDD') }).then(res => {
                const url = window.URL.createObjectURL(new Blob([res], { type: 'application/octet-stream;charset=utf-8' }))
                // 创建A标签
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.download = `知识点赞踩明细${moment().format('YYYYMMDD')}.xlsx`
                document.body.appendChild(link)
                link.click()
                message.success('导出成功！')
            })
        } catch (error) {
            message.success('导出失败！')
        }

    }