多张图片上传、图片回显、url路径转成File文件

1. 实现

背景：在表单中使用element-plus实现多张图片上传(限制最多10张)，因为还要与其他参数一起上传，所以使用formData格式。
编辑表单回显时得到的是图片路径数组，上传的格式是File，所以要进行一次转换。
在这里插入图片描述

<template>
    <el-dialog v-model="visible" :title="`${props.type === 'add' ? '新增' : '编辑'}`" direction="rtl" @close="handleDialogClose"
        :close-on-click-modal="false" class="auto-dialog" :center="true" destroy-on-close>
        <el-form ref="ruleFormRef" :model="ruleForm" label-position="right" label-width="auto">
            <!-- 省略表单项... -->
            
            <!-- 上传多张图片 -->
            <el-upload v-model:file-list="pictureList" accept=".png,.jpg,.jpeg" :auto-upload="false"
                list-type="picture-card" :class="{ 'upload-hide': pictureList?.length === 10 }"  :on-change="handleChanges" :on-preview="handlePictureCardPreview">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="previewVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>

            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form>
    </el-dialog>
</template>
<script setup lang="ts">
import type { UploadProps, UploadFile, UploadFiles } from 'element-plus';
import _ from '@lodash';

const visible = defineModel<boolean>({ default: false })
const props = defineProps<{
    type: 'add' | 'mod',
    id?: string
}>()
// 图片列表
const pictureList = ref<any[]>([])
// 图片预览显示
const previewVisible = ref(false)
// 图片预览url
const dialogImageUrl = ref('')
// 除图片外上传的其他参数
const ruleForm = reactive<Record<string, string>>({
    code: '',
    // 省略..
})

// 编辑时数据回显
watch(() => visible.value, async (val) => {
    if (val && props.type === 'mod' && props.id) {
        await getEditData(props.id)
    }
}, {
    deep: true
})
// 上传图片
const handleChanges: UploadProps['onChange'] = (file: UploadFile, fileList: UploadFiles) => {
    // 文件格式
    const isPngOrJpg = ['image/png', 'image/jpeg'].includes(file.raw.type)
    if (!isPngOrJpg) {
        ElMessage.warning('上传文件格式错误！');
        return false;
    }
    // 文件名重复
    const isDuplicate = pictureList.value?.some(item => item.name === file.name);
    if (isDuplicate) {
        ElMessage.warning('该文件已存在，请重新选择！');
        // 移除新添加的重复文件
        fileList.pop();
        pictureList.value = fileList;
    } else {
        pictureList.value = fileList;
    }
};

// 点击图片预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: UploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    previewVisible.value = true
}
// 编辑时数据回显
async function getEditData(id?: number) {
    try {
        if (!id) return;
        await nextTick()
        const res = await getEditData({ id });
        if (res.code || _.isEmpty(res?.data)) throw new Error(res?.message);
        ruleForm.value = _.cloneDeep(res?.data);//表单项回显
        
        // 图片列表数据格式要以{url: '', name: ''}格式，才能正确回显
        pictureList.value = ruleForm.value.pictures?.map((item: any) => {
            return {
                url: item,
                name: item?.url?.split('/').pop()
            }
        })
    } catch (error) {
        if (error?.code === RESPONSE_CODE.CANCEL) return;
        ElMessage.error(error?.message);
        console.log(`[log] - getEditData - error:`, error);
    }
};
// 路径url转成file文件格式
async function convertUrlToFile(imageUrl: string, fileName: string) {
    try {
        // 发起GET请求获取资源，设置responseType为blob
        const response = await fetch(imageUrl, { method: 'GET', mode: 'cors' });
        // 检查请求是否成功
        if (!response.ok) {
            throw new Error('图片加载失败！');
        }
        // 获取Blob数据
        const blob = await response.blob();
        // 创建File对象
        const file = new File([blob], fileName, { type: blob.type });
        return file;
    } catch (error) {
        console.error('图片url转换Blob失败!', error);
        return null;
    }
}
// 提交
async function handleSubmit() {
    try {
        // 表单校验省略...

        const fd = new FormData();
        // 除图片外的其他参数 （只上传图片，这步跳过）
        Object.keys(ruleForm).forEach(key => {
            fd.append(key, ruleForm[key]);
        });

        if (!_.isEmpty(pictureList.value)) {
            return ElMessage.warning('请先选择图片！');
        } else {
            const pictures = [] as File[]
            // 图片列表处理：
            for (let item of pictureList.value) {
                // 1. 图片url，需要先将url转换为文件格式，再上传
                if (!item?.raw) {
                    const fileName = item?.url?.split('/').pop()
                    const res = await convertUrlToFile(item.url, fileName)
                    if (!res) return
                    pictures.push(res)
                } else {
                    // 2. 图片文件，直接上传
                    pictures.push(item?.raw)
                }
            }
            pictures.forEach((item) => {
                fd.append('pictures', item);
            });
        }

        const res = await updateData(fd);
        if (res?.code) throw new Error(res?.message);
        ElMessage.success(res?.message );
        visible.value = false;
    } catch (error) {
        console.log(`[log] - handleSubmit - error:`, error);
        ElMessage.error(error?.message );
    }
}
</script>
<style scoped>
:deep(.el-upload-list--picture-card) {
    --el-upload-list-picture-card-size: 94px;
    width: 100%;
    max-height: 210px;
    overflow: auto;
}

:deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 94px
}

.upload-hide {
    :deep(.el-upload--picture-card) {
        display: none;
    }
}
</style>

2. 踩坑记录

问题：在对图片列表遍历后处理时，一开始在forEach中进行文件格式转换操作，数据项无法插入formData中，但控制台打印有值。
原错误写法：

        if (!_.isEmpty(pictureList.value)) {
            const pictures = [] as File[]
            pictureList.value.forEach(async(item) => {
                if (!item?.raw) {
                    const fileName = item?.url?.split('/').pop()
                    const res = await convertUrlToFile(item.url, fileName)
                    if(!res) return
                    pictures.push(res)
                } else {
                    pictures.push(item?.raw)
                }
            })
            console.log(pictures,'pictures');// 这里能打印
            pictures.forEach((item) => {
                fd.append('pictures', item);
            });
        }

原因：
forEach是并发执行，在每次迭代时会立即执行指定的回调函数，并且不会等待上一次迭代的结果，所以并不能保证每次convertUrlToFile操作都已完成。

解决方法： 使用promise.all() 确保遍历执行的所有操作都完成后，再执行append操作。
另外，也可以使用for...of 循环，因为它是用迭代器实现的，每次迭代都会等待 next() 返回，所以可以保证执行的顺序。

if (!_.isEmpty(pictureList.value)) {
  const promises = pictureList.value.map(async (item) => {
    if (!item?.raw) {
      const fileName = item?.url?.split('/').pop();
      const res = await convertUrlToFile(item.url, fileName);
      if (!res) return;
      return res;
    } else {
      return item?.raw;
    }
  });

  Promise.all(promises)
    .then((filledPictures) => {
      const pictures = filledPictures.filter(Boolean) as File[];
      pictures.forEach((item) => {
        fd.append('pictures', item);
      });
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}