vue 上传formData 数据格式的文件(如 ：上传图片)

背景：在提交表单时，后端设置了 formData 的数据格式，及提交时必须是一个文件。

如：

<el-button type="primary"  @click="uploadFile2()">点击上传</el-button>
 <input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data" style="display:none;" accept="image/jpeg,image/png,image/gif">

下面是对应的js 处理

//触发file 的 fileValueChange，参数是 e ，可用来表示事件

fileValueChange2(e){
	// 如果需要将文件转 base64  则可以使用
	const file = e.target.files; // input 获取的文件列表
	let reader = new FileReader(file)
	this.imgSrc  = reader.readAsDataURL()  //imgSrc 对应表单中绑定的数据
		//将 res 中的file 添加进入 fileData()  中
	reader.onload = (res)=>{ //加载完成后 
		//加载完设置数据的回显
	}
	
	// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
	
   // 选中文件后，会触发input的change事件，即会进入此函数
     var formData = new FormData()
     // this.$refs.uploadFile2是vue中获取dom元素的方法
     // 通过files就可以拿到所有上传的文件，如果是多个文件循环即可
     formData.append( 'file',this.$refs.uploadFile2.files[0])
     // 必须设置请求类型
     formData.append( 'type', "head");
     // 如果需要传id的情况下，参考下面代码
     formData.append( 'id', this.id);
     // 配置完成后，只需要向后台传入formData 变量即可
     Upload(formData).then(res=>{
       
     })
     
   },

当然后边有 axios 封装 axios 请求时 注意 post
格式 ，（不要转成 json 因为 json 和 formData 会发生冲突）