vue3vue-elementPlus-admin框架中form组件的upload写法

dialog中write组件代码

let ImageList = reactive<UploadFile[]>([])

const formSchema = reactive<FormSchema[]>([
  {
    field: 'ImageFiles',
    label: '现场图片',
    component: 'Upload',
    colProps: { span: 24 },
    componentProps: {
      limit: 5,
      action: PATH_URL + `/upload`,
      headers: {
        [userStore.getTokenKey]: userStore.getToken
      },
      autoUpload: true,
      // fileList: ImageList,
      multiple: true,
      listType: 'picture-card',
      beforeUpload: (file: File) => {
        const isImage = /^image\//.test(file.type)
        const isLt10M = file.size / 1024 / 1024 < 10
        if (!isImage) {
          ElMessage.error('只能上传图片文件!')
          return false
        }
        if (!isLt10M) {
          ElMessage.error('图片大小不能超过 10MB!')
          return false
        }
        return true
      },
      onSuccess: (response: UploadResponse, uploadFile: UploadFile) => {
        if (response.code === 200) {
          // 更新文件信息
          Object.assign(uploadFile, {
            url: MINO_SERVER + response.data.path,
            path: response.data.path,
            id: response.data.id,
            name: response.data.fullname
          })
          ImageList.push(uploadFile)
          handleImageUpdate(ImageList)
        } else {
          uploadFile.status = 'error'
        }
      },
      onError: (_: Error, uploadFile: UploadFile) => {
        uploadFile.status = 'error'
      },
      onPreview: (uploadFile: UploadFile) => {
        if (uploadFile.url) {
          window.open(uploadFile.url)
        }
      },
      beforeRemove: async (uploadFile: UploadFile) => {
        const newList = ImageList.filter((item) => item.id !== uploadFile.id)
        ImageList = newList
        handleImageUpdate(ImageList)
      },
      onExceed: () => {
        ElMessage.warning('最多只能上传5张图片')
      },

      slots: {
        default: () => (
          <div>
            <ElIcon class="avatar-uploader-icon" size="26" style="color:#165DFF">
              +
            </ElIcon>
          </div>
        ),
        tip: () => (
          <div class="el-upload__tip" style="width:420px;color:#606266">
            支持jpg、png格式，单个文件不超过10M，最多上传5张
          </div>
        )
      }
    }
  },

])

const handleImageUpdate = (imageList) => {
  setValues({ ImageFiles: imageList })
  setSchema([
    {
      field: 'ImageFiles',
      path: 'componentProps.fileList',
      value: imageList
    }
  ])
}


//回显时处理数据

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    // console.log(currentRow)
    setValues(currentRow)
    if (currentRow.ImageFiles && currentRow.ImageFiles.length) {
      currentRow.ImageFiles?.forEach((item) => {
        item.name = item.fullname
        item.url = MINO_SERVER + item.path
      })
      Object.assign(ImageList, currentRow.ImageFiles)
      handleImageUpdate(ImageList)
    } else {
      ImageList.splice(0, ImageList.length)
      handleImageUpdate(ImageList)
    }

  },
  {
    deep: true,
    immediate: true
  }
)

index页面记得处理提交的数据