vue2如何使用input的file配合axios上传文件、图片、音频等
Vue
2024-09-25 12:01:03
网站开发中关于文件的上传是组成网站重要的功能项之一,那么在前端的项目开发中我们要如何使用文件上传呢?
接下来就来介绍在vue项目中如何配合axios使用input的file属性实现文件上传效果。
vue中文件上传html部分代码
<input ref="fileInput" type="file" @change="uploadVideoToCOS"/>
vue中file上传js代码
uploadVideoToCOS(e){
const file = this.$refs.fileInput.files[0]; // 获取input file选择的文件
const formData = new FormData(); // 发送至服务器的数据
formData.append("file", file); // 添加文件数据到formData
formData.append("file_type", 'file'); // 添加文件数据到formData
this.axios.post('url地址',formData).then((res) => {
if(res.code == 200){
}else{
}
this.$refs.fileInput.value = null;
})
}
注意点:
每次上传后,需要对input的值进行清空。若不清空则会存在再次点击input时没有任何作用。
this.$refs.fileInput.value = null;
清空input现有数据。
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
870篇文章
161人已阅读