vue3.0 + element Plus实现图片上传及图片回显

1. HTML部分代码（引入上传组件）

on-remove	文件列表移除文件时的钩子	(uploadFile: UploadFile, uploadFiles: UploadFiles) => void
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	(uploadFile: UploadFile, uploadFiles: UploadFiles) => void
list-type	文件列表的类型	'text' | 'picture' | 'picture-card'
auto-upload	是否自动上传文件	boolean

2. js部分代码

import { type UploadProps, type UploadUserFile} from "element-plus";

const fileList = ref([]);  
const fileData = ref();
const fileImg = ref();

//通过接口获取到数据，完成回显
const { result: algData, onResult: onGetMarketData } = useQuery(
  queryGetAlgConfigMarket,
  {
    command: query.id,
  },
  {
    fetchPolicy: "no-cache",
  }
);

onGetMarketData((res) => {
  const marketData = res.data.GetAlgConfigMarket;
  //fileList格式必须要按照name,url的形式（可以参考element ui中文件格式），这里通过接口数据完成图片回显
  fileList.value = marketData.extraData.previewImg.map((i) => {
    return {
      name: +new Date(),   //如果没有name,可以自己随便定义
      url: i,
    };
  });
});

//运行效果上传
const handleChange: UploadProps["onChange"] = (uploadFile, uploadFiles) => {
  imgUrl.value = URL.createObjectURL(uploadFile.raw!);
  //图片格式为blob,所以我这里使用blobToBase64()将图片转化为base64
  blobToBase64(uploadFile.raw!).then((res) => {
    // 转化后的base64图片地址
    form.extraData.previewImg.push(res);
    fileData.value = fileList.value.map((item) => {
      return item.url;
    });
    fileImg.value = form.extraData.previewImg.concat(fileData.value);
  });
};

//图片删除
const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  //执行该方法时自动移除el-upload上显示的图片，所以方法体内只需要移除已上传的图片即可
  const index = fileImg.value.findIndex((item) => (item = file.url));
  fileImg.value.splice(index, 1); //移除已上传的图片
};

//表单提交
const onSave = async (formEl: FormInstance | undefined) => {
  //在表单提交时，先判断是否上传新的图片
  if (!fileImg.value) {
    fileImg.value = fileList.value.map((item) => {
      return item.url;
    });
  }
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      isSending.value = true;
      saveAlgConfig({
        command: {
          extraData: {
            previewImg: fileImg.value,
          },
        },
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

3. 样式参考