前端---文件上传 & 文件下载

比眉伴天荒 2023-01-21 09:24 3阅读 0赞

*  文件上传(通过FormData对象实现)

function uploadFile () {
      const formData = new FormData()
      formData.append('file', file.value)
      axios({
        method: 'post',
        url: '接口路径',
        data: formData
      }).then(() => { /* */ }).catch(() => { /* */ })
    }

此时请求头里面的 Content-Type 自动变成了 multipart/form-data;

*  文件下载(超链接方式，这种方式一般很常用)

此种方式是后端返回一个超链接给到前端，前端直接 window.location.href = 超链接 。

*  文件下载(post请求文件流，这种方式一般很少用)

function downLoadFile () {
          axios({
            method: 'get',
            url: '接口路径',
            data: {},
            responseType: 'blob' // 需要设置响应头的 Content-Type为blob
          }).then(response => {
            // type 根据实际情况修改
            const blob = new Blob([response.data], { type: 'application/pdf' })
            const href = window.URL.createObjectURL(blob)
            // 再通过 H5超链接 方式下载
            const eLink = document.createElement('a')
            eLink.style.display = 'none'
            eLink.href = href
            eLink.download = 'test.pdf' // 文件名，根据实际情况修改
            document.body.appendChild(eLink)
            eLink.click()
            document.body.removeChild(eLink)
          }).catch(() => { /* */ })
        }

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 springboot 实现单文件上传/多文件上传/文件下载

java 开发经常需要用到文件上传，接下来博主就创建一个springboot项目，实现单文件上传/多文件上传/文件下载功能 1.先看一下博主的项目结构图 ![waterma

忘是亡心i/ 2023年08月17日 16:56/ 0 赞/ 181 阅读

相关前端---文件上传 & 文件下载

文件上传(通过FormData对象实现) function uploadFile () { const formData = new FormDat

比眉伴天荒/ 2023年01月21日 09:24/ 0 赞/ 4 阅读

相关文件上传、下载

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

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

相关 xshell上传下载文件

xshell上传下载文件如题，现在使用xshell进行文件的上传下载。例如，把文件上传到服务器上，或者把文件从服务器上拉到本地。好，下面上货。首先点击

深碍√TFBOYSˉ_/ 2022年09月28日 01:29/ 0 赞/ 299 阅读

相关文件上传和下载

在Web应用系统开发中，文件上传和下载功能是非常常用的功能，今天来讲一下JavaWeb中的文件上传和下载功能的实现。　　对于文件上传，浏览器在上传的过程中是将文件以流的形式

川长思鸟来/ 2022年07月13日 00:28/ 0 赞/ 497 阅读

相关 javascript文件上传下载

文件上传： 1、同步上传使用 fileload 工具 http://blog.csdn.net/renfujiang/article/details/6198913

客官°小女子只卖身不卖艺/ 2022年05月21日 02:39/ 0 赞/ 278 阅读

相关文件上传&下载

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

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

相关文件上传-下载

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

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

相关文件上传下载

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

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