vue3 element plus FormData 图片上传

vue3 element plus FormData 图片上传，可以参考

 <el-upload
       class="avatar-uploader"
       :show-file-list="false"
       :headers="headers"
       :on-change="changeImgeSpouse"
       :auto-upload="true"
       v-model="formLabelAlign.spouseIdNumberUrl"
       accept=".jpg,.png">
       <img v-if="formLabelAlign.spouseIdNumberUrl" 
           :src="spouseIdNumberUrl?spouseIdNumberUrl:formLabelAlign.spouseIdNumberUrl" class="avatar"/>
       <img :src="ImgOne" v-else class="avatar"/>
 </el-upload>

element plus 文档上el-upload 有很多事件，我看着网友推荐的都用的on-success 或者 on-before事件。但是我这边尝试了都不生效，只有on-change事件生效了。

// 没有图片之前显示默认图片
import ImgOne from '@/assets/stepTwo/id-1.png'

//定义绑定的对象
const formLabelAlign = reactive({
        spouseIdNumberUrl:null,
})
    

// 设置headers getToken() 根据项目的情况来定哦~主要就是利用Cookie取一下token的值
const headers =  {
    Authorization: "Bearer " + getToken(),
    'Content-Type':'multipart/form-data'
}
 const changeImgeSpouse = (res,f) =>{
         //可以分别打印 res、f来看看参数
        let type = res.raw.name.substring(',').split('.')[1]
        let size = res.raw.size / 1024 / 1024 

        // 图片不能大于5MB
        if(size > 5 ){
            ElMessage.error('文件超出大小,请重新选择')
            return false
        }

        // 图片的格式
        if(type != 'jpg' && type != 'png'){
            ElMessage.error('文件格式错误,请重新选择')
            return false
        }

        let aimg = URL.createObjectURL(res.raw)
        spouseIdNumberUrl.value = aimg
        let formData = new FormData()
        formData.append('file',res.raw)
        
        // uploadImgUrlPost 是接口
        // headers 需要单独配置一下
        axios.post(uploadImgUrlPost,formData,{headers:uploadHeaders}).then(res =>{
            if(res.data.code == 200){
               formLabelAlign.spouseIdNumberUrl =  res.data.url
            }
        })
    }