vant van-uploader上传file文件；回显时使用imageId拼接路径

葱头的故事2025-10-25 12:15

上传

form.startOutsideSign.outsideSignPhotoFile是数组

复制代码

 <van-field name="startUploader"
                                    :rules="[{ validator: uploaderValidator, message: '请上传出发地照片' }]" required>
                                    <template #input>
                                        <van-uploader v-model="form.startOutsideSign.outsideSignPhotoFile"
                                            capture="camera" :max-count="1" :deletable="!formReadonly"
                                            :disabled="formReadonly" :after-read="afterReadStart"
                                            @delete="afterReadStart" />
                                    </template>
                                </van-field>

根据项目而定的校验

复制代码

    // 自定义上传组件的校验函数
        uploaderValidator(fileList) {
            // 如果当前是"提交"操作，则必须有文件
            if (this.currentActionType === 'submit') {
                return fileList && fileList.length > 0;
            }
            // 如果是其他操作（如保存），则直接通过校验
            return true;
        },

      afterReadStart(file) {
            console.log('新上传的文件:', file);
            // 应该清除原来的数据 
            this.form.startOutsideSign.imageId = '';
            // todo! 时间 地点
        },

提交代码时，因为要求outsideSignPhotoFile是 $file,file...$ 的格式，如果不是file文件，即是后端返回的图片，如含imageId，就不另外处理，

复制代码

     startOutsideSign.outsideSignPhotoFile = startOutsideSign.outsideSignPhotoFile.filter(ele => ele.file).map(ele => {
                        if (ele.file) {
                            return ele.file
                        }
                        return ele
                    })

回显

复制代码

  if (_startOutsideSign) {
                    _startOutsideSign.outsideSignPhotoFile = _startOutsideSign.imageId ? this.transformFileListByImageId(_startOutsideSign.imageId) : []
                }


        transformFileListByImageId(imageId) {

            return [
                {
                    url: this.imgUrl + imageId,
                    // 可以存储原始imageId，方便后续操作
                    isServerImage: true,
                    imageId,
                    isImage: true // 明确告诉Vant这是一个图片
                }
            ]
        },