vue中用js实现文件上传和文件下载

2021-03-17 13:24

阅读：690

标签：接口 sig 相同容器原因 remove tip value isp

在vue中，可以使用现有的框架，例如element-ui或者ant-design等来直接实现上传文件和下载文件。

但是我不想使用框架，直接用js来实现。

一、上传文件

1.编写页面

//上面这个按钮是用来显示上传按钮的

    
 
 
//这个input才是实际上传文件的容器，通过css让它不显示出来，只有上面的按钮
input
      type="file"
      ref="fileBtn" 
      id="uploadFile"
      accept="image/*"                    //限制上传文件的类型，不写就表示所有文件都支持
      @change="getFile($event)"           //上传文件时触发事件
      multiple="multiple"                 //是否支持上传多个文件
 />

2.js编写

//点击选择文件触发的事件，触发input的click事件
trigger() {
      this.$refs.fileBtn.dispatchEvent(new MouseEvent("click"));
},

 //上传文件
getFile(event) {
   let file = event.target.files[0];
   uploadImg(file)               //上传到服务器
      .then(res => {
         ...
          document.getElementById("uploadFile").value = null;   
      })
     .catch(error => {
           ...
     });
}

注：建议在上传文件成功后，将这个文件的value置为null，因为不清空这个input的value，是不能重复上传相同的文件，原因是input的value值不变，change事件不识别文件有变化。

二、下载文件

1.这种方法比较适合点击下载，调接口，返回的数据时下载地址，若已知下载地址，可以直接用a标签下载。

2.js代码：

//1.先创建一个a标签
let a = document.createElement("a");
//2.给a标签的href赋上下载地址
a.href = downurl;
//3.让a标签不显示在视图中
a.style.display = "none";
//4.将a标签append到文档中
document.body.appendChild(a);
//5.a标签自点击
a.click();
//6.点击下载后，销毁这个节点
document.body.removeChild(a);

vue中用js实现文件上传和文件下载

标签：接口 sig 相同容器原因 remove tip value isp

原文地址：https://www.cnblogs.com/zyl96/p/12786662.html

上一篇：js提取字符串中的汉字

下一篇：Webpack性能改造之CDN

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：vue中用js实现文件上传和文件下载
文章链接：http://soscw.com/index.php/essay/65316.html

亲，登录后才可以留言！

vue中用js实现文件上传和文件下载

评论

热门文章

推荐文章

最新文章

置顶文章