下载(接口返回的是文件流的)
首先配置请求的地方加上responseType:"blob" !!!
export function downloadTestExcel() {
return crewordRequest({
url: "路径",
method: "get",
responseType: "blob",
});
}
然后绑定点击事件
async downLoad(){
const res = await downloadTestExcel() //调用方法
let blob = new Blob([res], {
type: "application/octet-stream",
});
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = "常用语库.xls";
link.click();
//释放内存
window.URL.revokeObjectURL(link.href);
},
上传
自己手写文件上传
1.首先创建一个input类型为file的标签(input file类型标签不能自定义样式,如果要自定义样式的话就要隐藏这个input 然后写自己需要的样式,最后绑定点击事件去触发input)
<input ref="file" type="file" accept=".xls,.xlsx" style="display:none" @change="fileChange">
触发input
this.$refs.file.click()
2.给input绑定change事件,在input发生改变的时候去获取文件流和名字等(这里我只获取了文件流,但是名字什么的都在文件流里面,可以console出来看看就知道了)
fileChange(e){
let file = e.target.files[0]
},
3.获取到了文件流,就是调用接口传给后台
async upload(file){
let formData = new FormData()
formData.append("file",file)
const res = await uploadOftenWord(formData)
if(res.code === 200){
console.log(res)
}
},
注:如果是多文件上传的话,就在input里面加上 multiple="multiple" 这个属性,然后去获取fileList这个数组, 这个数组就是 e.target.files数组,最后上传如下
async upload(fileList){
let formData = new FormData()
fileList.map(item=>{
formData.append("file",item)
})
const res = await uploadOftenWord(formData)
if(res.code === 200){
console.log(res)
}
},
因为FormData 的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中,如果键不存在则会添加该键。
FormData.set 和 append() 的区别在于,如果指定的键已经存在, FormData.set 会使用新值覆盖已有的值,而 append() 会把新值添加到已有值集合的后面。
如果要清空file文件 可以用下面这个方面
this.$refs.file.value = ""