一般想要不刷新页面提交数据时，可以使用ajax提交。如果数据量不大可以自己写json数据用ajax提交到后台服务，但是数据量多且需要动态添加数据时，自己写json格式数据就有点麻烦了，这时候就需要FormData来替我们完成数据的装载了。

html上传视频文件（vue）

 <input type="file" class="upload uploadfile" v-on:change="fileChange" accept="video/*" name="upload" >

1、FormData动态添加数据

var fileObj = $(this.$el).find(".uploadfile")[0].files[0]; // js 获取文件对象
var formData = new FormData(); // FormData 对象
formData.append("file", fileObj); // 文件对象
//append()以键值对的形式往FormData塞数据

2、使用FormData和ajax配合提交表单可以实现不刷新页面，并且可以等待服务器返回结果做一些响应

fileChange(e) {
	if (e.target.value) {
		var url = "http://vip.crmclick.com/api/FileData.ashx?action=video"; // 接收上传文件的后台地址
		 $.ajax({
			url: url,
			type: "POST",
			cache: false,
			data: formData,
			processData: false,// 默认值: true 如果要发送 dom 树信息或其它不希望转换的信息，请设置为 false
			contentType: false,// 告诉jquery不要去设置Content-Type请求头
			success:(res)=> {
				this.src = res.url;
				this.$emit("save", this.src);
			},
			error:(data)=> {
	        }
	    });
	 }
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/3957