axios 上传/下载文件

骑猪看日落 2023-10-02 16:57 3阅读 0赞

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)
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 axios 上传/下载文件

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

骑猪看日落/ 2023年10月02日 16:57/ 0 赞/ 3 阅读

相关 java文件上传(java文件上传下载)

java文件怎么打开呢？可以用java的免费开发工具Eclipse或者JavaJDKAPI来打开运行 Java文件是什么？ Java文件是由SunMicrosy

灰太狼/ 2023年09月25日 08:16/ 0 赞/ 174 阅读

相关 VUE_vue使用axios上传文件，post上传文件，文件上传请求头

var formdata = new FormData(); for(var key in fileList){ //选择多文件使用循环遍历添加

た入场券/ 2022年12月07日 11:45/ 0 赞/ 351 阅读

相关文件上传、下载

文章目录文件上传 jsp servlet 文件下载文件上传 jsp jsp需要做如下

待我称王封你为后i/ 2022年10月29日 13:29/ 0 赞/ 272 阅读

相关 Element+Axios+SpringBoot上传文件

一、Element 组件 1、Element官网API https://element.eleme.cn//zh-CN/component/upload

r囧r小猫/ 2022年10月17日 13:44/ 0 赞/ 168 阅读

相关 axios上传下载文件

文件上传 fileUpload(val) { let fd = new FormData(); fd.append("fi

矫情吗；*/ 2022年10月08日 11:17/ 0 赞/ 184 阅读

相关文件上传&下载

上传步骤：１、创建解析工厂DiskFileItemFactory对象２、使用DiskFileItemFactory 对象创建ServletFileUpload对象。

喜欢ヅ旅行/ 2022年05月19日 05:28/ 0 赞/ 342 阅读

相关文件上传-下载

上传原理与图片上传类似详见维权资料上传下载一、上传 <input class="upload" type="file" style="di

末蓝、/ 2022年04月02日 11:58/ 0 赞/ 396 阅读

相关 vue+axios上传文件

单独上传文件： <input class="file" name="file" type="file" accept="image/png,image/gif,

我不是女神ヾ/ 2021年09月18日 02:24/ 0 赞/ 358 阅读

相关文件上传下载

JSP 1.input的type设置为file,还是通过表单进行提交 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

我就是我/ 2021年09月02日 05:51/ 0 赞/ 616 阅读