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

在vue中，可以使⽤现有的框架，例如element-ui或者ant-design等来直接实现上传⽂件和下载⽂件。但是我不想使⽤框架，直接⽤js来实现。⼀、上传⽂件1.编写页⾯

//上⾯这个按钮是⽤来显⽰上传按钮的

//这个input才是实际上传⽂件的容器，通过css让它不显⽰出来，只有上⾯的按钮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);