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, defineExpose } 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, extra } = defineProps({
    inspectionExecuteId: {
      type: Number,
    },
    extra: {
      type: Number,
    },
  });
  const loginUserStore = useLoginUserStore();
  const { uploadFile }  = useUploadFile();

  // 表单数据
  const baseFormData = reactive({
    handlerImgList: [],
  })
  
  // 处理图片
  const handlerImgRef = ref(null)
  
  // 上传图片
  const uploadFn = () => {
    handlerImgRef.value.upload();
  }
  
  defineExpose({
    uploadFn,
    baseFormData,
    extra,
    inspectionExecuteId,
  })
  
  // 处理图片
  function handlerOrderImg(imgObj){
    return uploadFile(imgObj, 'inspection', inspectionExecuteId, extra)
  }
  
  // 上传报修图片成功
  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(extra)
  })
</script>

<style lang="scss" scoped>

</style>