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

Posted 2021-02-21 阿周

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

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

一、上传文件

1.编写页面

//上面这个按钮是用来显示上传按钮的
<div class="addFile">
    <button @click="trigger">选择文件</button>
 </div>
 
//这个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);