vue +vant + crodova实现图片上传、图片预览、图片删除

函数调用方法使用图片预览有坑，图片不显示

<template>
  <div class="add-check-page">
    <head-com :title="title"></head-com>
    <van-form @submit="onSubmit">
      <h2 class="van-doc-demo-block__title">添加照片</h2>
      <van-field name="uploader" class="pic-uploader">
        <template #input>
          <template v-for="(item, index) in file_path">
            <div class="item" :key="index">
              <van-image fit="cover" :src="IP + item" @click="preView(index)">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <van-icon name="close" @click="delPic(index)" />
            </div>
          </template>
          <van-icon class="up-btn" @click="picture" :name="require('#/images/add_check_icon.png')" />
          <van-uploader id="photo" multiple :after-read="afterRead" style="display:none">
            <van-button
              class="up-btn"
              :icon="require('#/images/add_check_icon.png')"
              type="default"
            />
          </van-uploader>
        </template>
      </van-field>
      <van-button class="save" block type="default" native-type="submit">确认提交</van-button>
    </van-form>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
    />
    <loading :showLoading="showLoad"></loading>
    // 使用函数调用图片预览方法，图片无法显示所以改用组件调用
    <van-image-preview
      v-if="imgShow"
      v-model="imgShow"
      :images="preList"
      :start-position="startIndex"
      @closed="handleClose"
    ></van-image-preview>
  </div>
</template>
<script>
import headCom from '_c/header/index.vue'
import loading from '_c/loading/index.vue'
export default {
  components: {
    headCom,
    loading
  },
  data() {
    return {
      //   公司id
      id: '',
      id2: '',
      title: '',
      file_name: [],
      file_path: [],
      content: '',
      show: false,
      actions: [{ name: '拍摄' }, { name: '从手机相册选择' }],
      showLoad: false,
      imgPre: '',
      imgShow: false,
      preList: [],
      startIndex: 0
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.imgPre) {
      this.imgPre.close()
    }
    next()
  },
  created() {
    this.id = this.$route.params.id
    if (this.$route.name === 'editCheck') {
      this.title = '编辑记录'
      this.getInfo()
    } else {
      this.title = '添加记录'
    }
  },
  methods: {
    async getInfo() {
      this.showLoad = true
      try {
        let data = {
          id: this.id
        }
        let res = await this.$api.check.edit(data)
        this.content = res.detail.content
        this.id2 = res.detail.company_id
        res.photo_list.forEach((item) => {
          this.file_name.push(item.file_name)
          this.file_path.push(item.file_path)
        })
        this.showLoad = false
      } catch (error) {
        this.showLoad = false
        this.$toast(error.msg)
      }
    },
    async onSubmit(values) {
      this.showLoad = true
      try {
        let data = {}
        if (this.$route.name === 'editCheck') {
          data = {
            id: this.id,
            company_id: this.id2,
            content: values.content,
            file_names: [...this.file_name],
            file_paths: [...this.file_path]
          }
          await this.$api.check.editPost(data)
        } else {
          // 添加
          data = {
            company_id: this.id,
            content: values.content,
            file_names: [...this.file_name],
            file_paths: [...this.file_path]
          }
          await this.$api.check.addPost(data)
        }
        this.showLoad = false
        this.$router.go(-1)
      } catch (error) {
        this.$toast(error.msg)
      }
    },
    // 删除图片
    delPic(index) {
      this.file_path.splice(index, 1)
      this.file_name.splice(index, 1)
    },
    // 图片预览
    preView(index) {
      this.startIndex = index
      this.preList = []
      this.file_path.forEach((item) => {
        this.preList.push(this.IP + item)
      })
      this.imgShow = true
    },
    // 关闭预览
    handleClose() {
      this.preList = []
      this.imgShow = false
    },
    async afterRead(file) {
      this.showLoad = true
      try {
        if (file.length) {
          file.forEach(async (item) => {
            let res = await this.$api.base.upload(item)
            this.file_name.push(res.name)
            this.file_path.push(res.url)
            this.showLoad = false
          })
        } else {
          let res = await this.$api.base.upload(file)
          this.file_name.push(res.name)
          this.file_path.push(res.url)
          this.showLoad = false
        }
      } catch (e) {
        this.showLoad = false
        this.$toast(e.data)
      }
    },
    picture() {
      this.show = true
    },
    // 选择添加图片方式
    onSelect(item) {
      this.show = false
      if (item.name === '拍摄') {
        this.takePhoto()
      } else {
        let dl = document.getElementById('photo')
        dl.click()
      }
    },
    // 拍照上传
    takePhoto() {
      let that = this
      // crodova 调取相机拍照
      navigator.camera.getPicture(success, error, {})
      function success(imageURI) {
        that.showLoad = true
        // file uri 上传服务器
        that.fileUpload(imageURI)
      }
      function error() {
        this.$toast('打开相机失败')
      }
    }，
    // 使用cordova FileUpload上传图片
    fileUpload: function(imageURI) {
      let that = this
      let FileUploadOptions = window.FileUploadOptions
      let FileTransfer = window.FileTransfer
      let options = new FileUploadOptions()
      options.fileKey = 'file'
      options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1)
      options.mimeType = 'image/jpeg'
      let ft = new FileTransfer()
      ft.upload(imageURI, encodeURI(this.API + '/user/uploadImg'), function(data) {
        let resString = data.response
        let resObject = JSON.parse(resString) // 字符串转对象
        if (resObject.code === 1) {
          that.file_name.push(resObject.data.name)
          that.file_path.push(resObject.data.url)
          that.showLoad = false
        } else {
          that.showLoad = false
          that.$toast(resObject.msg)
        }
      })
    }
  }
}
</script>