利用upload上传头像

在页面中利用element-plus的upload上传头像

<el-upload class="avatar-uploader" :show-file-list="false" 
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload" action="">
    <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728="">
            <path fill="currentColor"
              d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z">
             </path>
         </svg>
    </el-icon>
</el-upload>

在点击确定之后在保存信息时，提交头像

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response: any,
  uploadFile: any
) => {
  // formData.avatar = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile: any) => {
  if (
    rawFile.type !== "image/jpeg" &&
    rawFile.type !== "image/webp" &&
    rawFile.type !== "image/png"
  ) {
    ElMessage.error("选择文件应为jpg/png格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("文件最大为2M!");
    return false;
  }

  formData.avatar = URL.createObjectURL(rawFile);
  avrtarFile.value = rawFile


  return false;
};


// 提交代码时的操作，问文件类型转换类blob
const avatarD = new FormData()
    avatarD.append("file", avrtarFile.value)
    api.editUserAvatar(avatarD).then((res: any) => {
      console.log(res);
})