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

发布时间:2024年01月12日

文章目录

概要

这段代码是一个下载文件的函数。它通过使用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);
        })
      },

文章来源:https://blog.csdn.net/weixin_51391923/article/details/135505265
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。