el-upload 从后端获取图片数据进行回显,并二次编辑提交等(vue3)

<el-upload style="margin-left: 80px;" v-model="addParams.image" :file-list="fileList"
                   v-if="typeChangeFinal === 1"
                   :action="uploadUrl" list-type="picture-card" :on-success="handleSuccess"
                   :on-preview="handlePictureCardPreview"
                   :on-remove="handleRemove" :before-upload="beforeUpload">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>

组件部分代码如上,主要是v-model, 和 :file-list 部分,采用两个变量进行存储,fileList存储从后端拿到的数据,这部分数据需要手动构建数据结构,这样才能回显到el-upload组件上进行显示,其他函数根据逻辑正常写就可以.

首先: v-model, 绑定上传的图片路径, on-success根据实际逻辑来写

fileList 开始为空数组, 这样上传逻辑不受任何影响

然后数据回显,从后端拿到图片数组数据后,遍历这个数据,手动构建数据结构,主要字段就是这些字段,uid,status,url等信息必须有,status状态就是标记上传成功失败

fileList.value = val.image.map(item => {
    return {
      name: item,
      url: imageUrl + item,
      status: 'success',
      uid: new Date().getTime()
    }
  })

然后需要在on-remove函数中进行判断,判断是刚上传的数据,还是从后端拿回来的数据

const handleRemove = (uploadFile, uploadFiles) => {
  let remove
  if (uploadFile.response === undefined) {
    remove = uploadFile.name
    fileList.value = fileList.value.filter(item => item.name !== remove)
    addParams.image = addParams.image.filter(item => item !== remove)
  } else {
    remove = uploadFile.response.data.file_url
    addParams.image = addParams.image.filter(item => item !== remove)
  }
}

在这判断是初始上传数据还是后端数据,如果是后端拿回来的数据,就从两个列表中都要移除,如果是初始数据,就只需要移除初始中的,因为我们构建的数据没有response,所以可以用它来进行判断

这样移除问题也处理完了,最后在添加的时候,在进行一次最终数据构建就可以了

fileList.value.forEach(item => {
        addParams.image.push(item.name)
      })

这样addParams.image中,就会包含初始的数据,还有fileList中修改的数据

---------------------------------------------------------------------------------------------------------------------------------

封装组件实例(供参考)

<template>
  <el-upload v-model="initList" :file-list="fileList" drag
             :action="uploadUrl" list-type="picture-card" :on-success="handleSuccess"
             :on-preview="handlePictureCardPreview" :limit="limitNum" :on-exceed="handleExceed"
             :on-remove="handleRemove" :before-upload="beforeUpload">
    <el-icon>
      <Plus/>
    </el-icon>
  </el-upload>

  <el-dialog v-model="dialogImage" style="text-align: center">
    <img :src="dialogImageUrl" alt="Preview Image"/>
  </el-dialog>
</template>

<script setup>
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {baseURL} from "@/utils/request.js";
import {ref, reactive, onMounted, watch} from 'vue'

const initList = ref([])
const fileList = ref([])

const props = defineProps({
  transList: {
    type: Array,
    default: () => []
  },
  limitNum: {
    type: Number,
    default: 100
  }
})

const uploadUrl = baseURL + '/utils/upload_file/'

const dialogImage = ref(false)

// 标签上传图片
const dialogImageUrl = ref('')
// 上传前
const beforeUpload = (file) => {
  if (file.size > 1024 * 1024 * 2) {
    ElMessage.error('图片不能超过2M!')
    return false
  }
  return true
}
// 移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  let remove
  if (uploadFile.response === undefined) {
    remove = uploadFile.name
    fileList.value = fileList.value.filter(item => item.name !== remove)
    initList.value = initList.value.filter(item => item !== remove)
  } else {
    remove = uploadFile.response.data.file_url
    initList.value = initList.value.filter(item => item !== remove)
  }
}
// 图片上传成功
const handleSuccess = async (uploadFile) => {
  dialogImageUrl.value = uploadFile.data.file_url
  initList.value.push(dialogImageUrl.value)
  fileList.value.push({
    name: dialogImageUrl.value,
    url: baseURL + dialogImageUrl.value,
    status: 'success',
    uid: new Date().getTime()
  })
}
// 预览图片
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogImage.value = true
}

// 数量限制
const handleExceed = (files, fileList) => {
  if (fileList.length >= props.limitNum){
    ElMessage.error(`当前只允许上传${props.limitNum}张图片`);
  }
}

onMounted(() => {
  fileList.value = props.transList.map(item => {
    return {
      name: item,
      url: baseURL + item,
      status: 'success',
      uid: new Date().getTime()
    }
  })
  initList.value = props.transList
})
defineExpose({
  initList,
  fileList
});

const emit = defineEmits(['update:list'])
watch(initList, (newValue)=>{
  emit('update:list', newValue)
},{deep: true})
</script>

<style scoped lang="scss">

</style>

使用:  使用组件需要使用key来进行每次的刷新

 <UploadImage @update:list="handleListUpdate"
                       :trans-list="account.urls" :key="imgKey"></UploadImage>

或者使用ref属性,使用ref的value在取到initlist 使用