vue+element.ui+formData自定义文件上传

记录一下element.ui自定义上传文件踩得坑

为什么要自定义上传？

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

以上代码是element官网上传文件的案例，但是实际开发中，由于接口存在一些特殊限制（比如限制请求头，要求携带一些特殊参数），用官网上传文件方法就显得不是特别方便，所以我们用element上传文件的时候一般会选择自定义上传文件

自定义上传方法：

html:

<el-upload
 limit="1" //限制上传图片数量
 accept=".jpeg,.png"  //限制上传图片格式
 action="" //actions是默认的上传，我们给他置空，但是最好不要删除
 :show-file-list="false" //取消自带显示的图片列表
 :on-preview="handlePictureCardPreview"//预览回调
 :on-remove="handleRemove"//删除回调
 :http-request="(file) =>{handleAvatarSuccess(file,自定义参数)}"//自定义上传方法
 >

这里给actions置空，取消upload的默认上传文件方法，添加http-request文件，添加默认上传文件的回调

这个http-request有个需要注意的点：由于http-request属性的值只接受一个函数，不接受函数调用的结果，所以我们这个地方如果想要给http-request回调传一个自定义参数，需要通过回调函数调用的方法（file为http-request默认的形参，文件对象，）

JS:

async handleAvatarSuccess(files,params){
     const loading = this.$loading({  //element的加载框
       lock: true,
       text: '图片上传中...',
       spinner: 'el-icon-loading',
       background: 'rgba(0, 0, 0, 0.7)'
     });
        
	let { file , name } = files
	let formData = new FormData()
	formData.append('接口要求的字段名',file,name) //这个file默认接受的一整个	element上传文件的对象，文件在里面的file字段里面
	
	try{
		const res = await getImg(formData)
		if(res.code == 200 ){
			console.log('文件上传成功,res里面取图片')
		}
		loading.close();
	}catch(err){
		this.$message.warning('图片上传失败')
		loading.close();
	}
}