使用input标签,type=‘file’的时候就可以上传文件,为input标签添加change事件,调用函数。
<input type="file" @change="uploading">
之后再函数里创建formdata对象,将文件append到对象中去
uploading(e) {
let file = e.target.file[0];
this.body = new FormData();
this.body.append('file', file);
// 这里需要将input的value设置为空,否则再次选择相同的文件便不会触发change事件
e.target.value = "";
}
接下来将formdata对象通过post传世给后端即可,这里需要设置post的header为multipart/form-data
uploadingClick() {
let headers = {headers: {"Content-Type": "multipart/form-data"}}
this.$axios.post(`someApi`,this.body,headers).then(
res => {
if (res.data.result_code == 0) {
// 这里需要delete掉formdata中的file属性,不然再次点击按钮的时候,会上传相同的文件
this.body.delete('file')
}
}
)
}
置于如何显示上传的图片,一次上传多张图片,删除以上传的图片如何实现,请见下回分晓