van-uploader上传图片后，再次编辑，回显预览

首先是正常上传的代码

<van-uploader
    :class="{
        'upload-type-file':type =='附件',
        'upload-type-image':type =='图片'
    :result-type="type =='附件'?'file’:'dataUrl'"
    :disabled="props.notAllowed != false"
    multiple
    :accept="accept"
    :max-count="props.fileLimit == 0? undefined : props.fileLimit'
    v-model="fileList"
    :after-read="afterRead"
    @click-preview="previewpic'
    :preview-size="type =='附件'?:40
    @delete="removeFile"
    style="display: block"
>
    <van-button
        v-if="type =='图片'"
        icon="plus'
        native-type="button
        class="upload-btn"
        plain
    ></van-button>
    <van-button
        v-else-if="type =='附件'”
        round
        size="small"
        color="linear-gradient(90deg,#ff7e34 0%,#ffb58b 100%)"
        block
        icon="plus"
        native-type="button"
    >上传附件</van-button>
</van-uploader>

回显文件列表

观察返回数据，可得到fileId数组，但并不满足van-uploader的fileList，可以看到有个file对象，需要进行数据处理，才能正确显示文件列表

返回数据

uploader上传的文件列表

// 编辑状态，回显文件列表使
if(this.formData[this.id].length>0){
   this.filelist=this.formData[this.id].map(item=>{
      return {
        ...item,
        file:{
           name:item.fileName
        }
      }
   })
}

after-read

是文件读取完成后的回调函数（async 为默认值时必填）

自定义上传样式

通过插槽可以自定义上传区域的样式，将上传按钮写在需要的地方

<van-uploader>
  <van-button icon="photo" type="primary">上传图片</van-button>
</van-uploader>

ImagePreview预览

预览通过vant的ImagePreview组件，请求接口返回base64来实现,使用前先引入

//request.js文件写请求方法
$httpDown:function(val){
    const target=`/wdbo/api/file/viewBase64/${val}`
    return ddjwt.get(target)
}

//使用前先引入
import {ImagePreview} form 'vant'

previewPic(val){
  console.log('val',val)
  const {fileName,fileId}=val
  if(fileName){
     const fileType=fileName.split('.')[1]console.log('fileType',fileType)
     if(fileType=='png'||lfileType='jpg' ){
        request.$httpDown(fileId).then((res)=>{
          console.log(JS0N.parse(res.data).data);
            ImagePreview({
              images:[ `data:image/jpeg;base64,`+ JSON.parse(res.data).data]
              closeable:true
            })
        })
    }
  }
}

 文件上传

创建formData对象，正确传参后端上传接口进行上传

html中的 v-model="fileList"为绑定的文件列表数值

afterRead(fileParams, detail){
    if(Array.isArray(fileParams)){
        fileParams.forEach((file)=>{this.uploadFile(file);});
    }else {
        this.uploadFile(fileParams)
    }
}

uploadFile(file){
    file.status = "uploading";
    file.message ="上传中...";
    let formData =new FormData();
    formData.append("file", file.file);
    request.$httpUpload(formData).then((res)=>{
        if(res.success){
            file.status ="done";
            file.message =“上传完成”;
            file.fileId = res.data;
            // 同步表单数据
            this.formData[this.id].push({
                fileId: file.fileId,
                fileName: file.file.name,
                size:this.formatFilesize(file.file.size)
            });
        else {
            file.fileId = "error".
            file.status ="failed",
            file.message ="上传失败”,
    });
}

文件删除

//有时只是本地短暂删除，不保存就不算删除，所以只是进行一个简单的数组删除，视具体情况而定

removeFile(file, detail){
    let _index= this.formData[this.id].
        findIndex((item)=>item.fileId == file.fileld) 
    this.formData[this.id].splice(_index, 1);
},