jeesite配合上传

<template>
  <BasicModal v-bind="$attrs" :title="t('添加危险点标志牌')" :maskClosable="false" :okText="t('确定')" @register="registerModal"
    @ok="handleSubmit" :minHeight="120" :width="400">
    <Upload accept=".gif,.bmp,.jpeg,.jpg,.ico,.png,.tif,.tiff" :file-list="fileList" @remove="handleRemove"
      :before-upload="beforeUpload" :maxCount="maxNumber" list-type="picture">
      <a-button type="primary">
        <Icon icon="ant-design:upload-outlined" /> {{ t('选择图片') }}
      </a-button>
      <span class="ml-4">{{ uploadInfo }}</span>
    </Upload>
    <div class="mt-4">
      提示：仅允许添加一张标志牌，若有，则先删除
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { Upload } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { buildUUID } from '/@/utils/uuid';
import { Icon } from '/@/components/Icon';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { ControlRiskDeathtrapSign, formDeathtrapSign, saveDeathtrapSign } from '/@/api/doublecontrol/riskdeathtrap/controlRiskDeathtrap';
import { uploadFile, uploadFileList } from '/@/api/sys/upload';
import { checkImgType, getBase64WithFile } from '/@/components/Upload/src/helper';
import { isArray } from '/@/utils/is';
import { file } from '@babel/types';

const emit = defineEmits(['success', 'register']);

const { t } = useI18n('relevant.relevantPersonnel');
const { showMessage, createMessage } = useMessage();

const record: any = ref<ControlRiskDeathtrapSign>({} as ControlRiskDeathtrapSign);
const fileList: any = ref([]);
const maxNumber = ref(1)
const uploadInfo = ref('');
const bizType = ref('controlRiskDeathtrapSign_image')

const beforeUpload = (file: File) => {
  if (fileList.value.length >= maxNumber.value) {
    createMessage.warning(t('component.upload.maxNumber', [maxNumber.value]));
    return;
  }
  const { size, name } = file;
  let commonItem = {
    id: buildUUID(),
    file: file,
    size,
    name,
    percent: 0,
    type: name.split('.').pop(),
    fileMd5: buildUUID(),
    fileName: name,
    fileUploadId: '',
    fileEntityId: '',
    bizKey: record.value.id,
    bizType: 'controlRiskDeathtrapSign_image',
    uploadType: 'image',
  }
  if (checkImgType(file)) {
    getBase64WithFile(file).then(({ result: fileUrl }) => {
      addFileItem({
        thumbUrl: fileUrl,
        url: fileUrl,
        ...commonItem,
      });
    });
  } else {
    addFileItem(commonItem);
  }
  return false;
};

function addFileItem(record: any) {
  fileList.value = [...unref(fileList), record];
  uploadApiByItem(fileList.value[fileList.value.length - 1])
}

const handleRemove = (file: any) => {
  if (file && file.bizKey) {
    record.value.dataMap[bizType.value + '__del'] = file.id
  }
  fileList.value = [];
};

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  const res = await formDeathtrapSign({ riskDeathtrapId: data.id });
  record.value = (res.controlRiskDeathtrapSign || {}) as ControlRiskDeathtrapSign;
  record.value.__t = new Date().getTime();
  record.value.dataMap = {}
  fileList.value = []
  if (record.value.id) {
    getImg()
  }
});


function getImg() {
  uploadFileList({
    bizKey: record.value.id,
    bizType: bizType.value,
  }).then((res) => {
    if (isArray(res)) {
      fileList.value = res.map(item => {
        item.name = item.fileName
        item.thumbUrl = '/js' + item.fileUrl
        return item
      });
      record.value.dataMap[bizType.value + '__len'] = fileList.value.length;
    }
  });
}
function onUploadProgress(progressEvent: ProgressEvent) {
  console.log(progressEvent)
  const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
  if (complete != 100) {
    uploadInfo.value = t('正在上传，请稍后') + ' ' + complete + '%...';
  } else {
    uploadInfo.value = '';
  }
}

async function uploadApiByItem(item: any) {
  try {
    const res = await uploadFile({
      bizKey: item.bizKey,
      bizType: item.bizType,
      uploadType: item.uploadType,
      fileMd5: item.fileMd5,
      fileName: item.fileName,
      fileUploadId: item.fileUploadId,
      fileEntityId: item.fileEntityId,
      file: item.file
    }, onUploadProgress)
    if (res.data.result) {
      record.value.dataMap[bizType.value] = res.data.fileUpload.id
      record.value.dataMap[bizType.value + '__len'] = fileList.value.length
    }
  } catch (error) {

  }
}

async function handleSubmit() {
  try {
    if (fileList.value.length == 0) {
      showMessage('请选择要上传的图片');
      return;
    }
    setModalProps({ confirmLoading: true });
    const params: any = {
      isNewRecord: record.value.isNewRecord,
      id: record.value.id,
    };
    const data = {
      riskDeathtrapId: record.value.riskDeathtrapId,
      dataMap: record.value.dataMap
    }
    const res = await saveDeathtrapSign(params, data);
    showMessage(res.message)
    setTimeout(closeModal);
    emit('success');
  } catch (error: any) {
    if (error && error.errorFields) {
      showMessage(t('您填写的信息有误，请根据提示修正。'));
    }
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>