网站开发中关于文件的上传是组成网站重要的功能项之一，那么在前端的项目开发中我们要如何使用文件上传呢？

接下来就来介绍在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现有数据。