使用avue组件实现上传文件和下载文件的功能

最新推荐文章于 2024-04-30 11:22:34 发布

始终坚持在保安岗位

最新推荐文章于 2024-04-30 11:22:34 发布

阅读量1.3k

点赞数 29

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_51391923/article/details/135505265

版权

文章目录

概要

这段代码是一个下载文件的函数。它通过使用axios库发送POST请求来获取文件，并将文件流通过Blob对象进行处理。

首先，函数接受一个参数row，表示要下载文件的相关信息。

然后，创建一个FormData对象formData，用于存放要上传的文件。在这个例子中，将row.id作为文件的标识，并将其添加到formData中。

接下来，使用axios发送请求。请求的URL是"/apis/erp-storehouse/uploadTemplate/download"，请求头部设置了"Content-Type"为"multipart/form-data"，请求方法为POST，请求数据为formData。

当请求成功后，会得到一个响应res。可以通过res.data.data获取到文件流。首先，将文件流转换为字符串形式的JSON格式，存储在panelsJson变量中。

然后，设置下载文件的相关属性。使用当前时间戳生成文件名，并将panelsJson作为文件内容。最后，创建一个<a>元素，设置其href属性为包含文件内容的URI，download属性为文件名加上".json"后缀。

最后，将<a>元素添加到页面的<body>中，模拟点击下载链接，然后将<a>元素从页面中移除。

整个过程实现了从服务器下载文件，并将文件保存到客户端的功能

上代码

 download(row) {
        console.log(row);
        let formData = new FormData();
        // 将上传的文件放到数据对象中
        formData.append("id", row.id);
        axios({
          url: "/apis/erp-storehouse/uploadTemplate/download",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          method: "Post",
          data: formData,
        }).then(res =>{
          console.log(res);
          // 开始处理文件下载 - res.data为文件流
          const fileName = 'fileName' + Date.now();
          var panelsJson = JSON.stringify(res.data.data);
          console.log(panelsJson);
          var name = row.templateName
          var path = row.templatePath
          //var data = JSON.stringify(panelsJson)
          let uri = 'data:application/json;charset=utf-8,' + encodeURIComponent('\ufeff' + panelsJson);
          console.log(uri);
          let link = document.createElement("a");
          link.href = uri;
          link.download =  name+".json";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
      },