itsm-wx-handle/components/DsFilePicker.vue

<template>
  <uni-file-picker ref="handlerImgRef" v-model="baseFormData.handlerImgList" limit="3" @success="handlerImgSuccess" @fail="handlerImgFail" @select="handlerImgSelect" @delete="handlerImgDelete" title="(支持JPG/PNG格式图片，单张大小10M以内)"></uni-file-picker>
</template>

<script setup>
  import { defineEmits, ref, reactive, defineProps } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useUploadFile } from '@/share/useUploadFile.js'

  const emit = defineEmits(['cancelEmit', 'knowEmit']);
  const { inspectionExecuteId } = defineProps({
    inspectionExecuteId: {
      type: Number,
    }
  });
  const loginUserStore = useLoginUserStore();
  const { uploadFile }  = useUploadFile();

  // 表单数据
  const baseFormData = reactive({
    handlerImgList: [],
  })
  
  // 处理图片
  const handlerImgRef = ref(null)
  // handlerImgRef.value.upload();
  
  // 处理图片
  function handlerOrderImg(imgObj){
    return uploadFile(imgObj, 'incident', inspectionExecuteId.value)
  }
  
  // 上传报修图片成功
  function handlerImgSuccess(e){
    baseFormData.handlerImgList.forEach(v => {
      v.url = v.path;
    })
    
    let requestList = [];
    
    // 处理图片
    baseFormData.handlerImgList.forEach(v => {
      let handlerOrderImg$ = handlerOrderImg(v);
      requestList.push(handlerOrderImg$);
    })
    
    Promise.all(requestList).then(resList => {
      uni.hideLoading();
      console.log(resList);
      uni.showToast({
      	icon: 'none',
        title: '建单成功',
        mask: true,
      });
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/incidentList/incidentList',
        })
      }, 1500)
    })
  }
  
  // 上传报修图片失败
  function handlerImgFail(e){
    baseFormData.handlerImgList.forEach(v => {
      v.url = v.path;
    })
  }
  
  // 选择上传图片
  function handlerImgSelect(e){
    baseFormData.handlerImgList = baseFormData.handlerImgList.concat(e.tempFiles);
  }
  
  // 删除上传图片
  function handlerImgDelete(e){
    baseFormData.handlerImgList = baseFormData.handlerImgList.filter(v => e.tempFile.uuid != v.uuid);
  }
  
  onLoad((option) => {
    console.log(inspectionExecuteId)
  })
</script>

<style lang="scss" scoped>

</style>