vue的单文件上传与多文件上传与blob

在文件上传的操作中，我们首先要定义一个formdata数组去存放要向后端发送的数据

var formData = new FormData();

如果是单文件的话，我们只需要将要发送的文件放到我们所创建的formdata数组中，这里this.fileList[0].raw就是我的文件，这里一定要注意加上raw才是真实文件数据，否则会报500错误。

formData.append("file", this.fileList[0].raw);

接下来我们只需要将formdata以参数形式传给后端即可

this.$post(this.$url.NAVIGATION + 'xxxxxxx', formData, )

如果是多文件上传，我们就要遍历一下filelist数组中所存放的文件数量，然后再去发送。

this.fileList.forEach((item) => {
    formData.append('file', item.raw);
    console.log("file")
});

同理，如果除了文件还要向后端传递其他内容，只要append就好了。

formData.append("password",this.password);

补充，在向后端传递文件时，经常需要我们前端将文件进行一个数据处理，这时候输入以下代码。

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。

let blob = new Blob([res.data]);//response.data为后端传的流文件
console.log(blob);

let downloadFilename = "数据.tar";
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    //兼容ie浏览器
    window.navigator.msSaveOrOpenBlob(blob, downloadFilename)
}else {
    //谷歌,火狐等浏览器
    let url = window.URL.createObjectURL(blob);
    let downloadElement = document.createElement("a");
    downloadElement.style.display = "none";
    downloadElement.href = url;

    console.log(url);
    downloadElement.download = downloadFilename;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(url);
}
this.$message.success('上传并导出成功！')
    .catch(()=>{
        this.$message.error("下载失败")
    })