当前位置：首页 > news >正文

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

news 2025/10/25 7:11:05

上传

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这是一个图片}]},

查看全文

http://www.dtcms.com/a/523747.html