ed-frame-vue/lib/packages/EasyDataForm/hooks/useUpload.js

easydata 基础组件

import {getControlProp} from "../../../utils/useBusiness";
import {getFileAccessHttpUrl, DefaultUrl} from "../../../api/easyData";

export default {
  data() {
    return {
      downloadUrl: '/admin-api/infra/file/'
    }
  },
  methods: {
    /**
     * @name beforeUpload
     * @param file
     * @param control
     * @return {Promise<unknown>|*}
     */
    beforeUpload(file, control) {
      let controlProp = getControlProp(control, this.controlProps);
      if (controlProp.isWatermark) {
        return new Promise(async (resolve, reject) => {
          let info = ''
          if (controlProp.watermarkType === '1') {
            let geolocation = MapLoader.initMap("map-container"); //定位
            AMap.event.addListener(geolocation, "complete", result => {
              info = result.formattedAddress + '||' + new Date().toLocaleString()
              this.transformFile(file, info).then(res => {
                resolve(res)
              }).catch(error => {
                reject(error)
              })
            });
          } else {
            info = controlProp.watermarkInfo
            this.transformFile(file, info).then(res => {
              resolve(res)
            }).catch(error => {
              reject(error)
            })
          }
        })
      } else {
        return file
      }
    },

    /**
     * @name transformFile
     * @param file
     * @param info
     * @return {Promise<unknown>}
     */
    transformFile(file, info) {
      return new Promise(resolve => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          const canvas = document.createElement('canvas');
          const img = document.createElement('img');
          img.src = reader.result;
          img.onload = () => {
            const ctx = canvas.getContext('2d');
            let width = img.width;
            let height = img.height;
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
            ctx.font = "800 30px Microsoft JhengHei";
            ctx.fillStyle = "red";
            ctx.textAlign = 'right';
            ctx.textBaseline = 'Middle';
            let text = info.split('||')
            text.forEach((t, i) => {
              ctx.fillText(t, width - 50, height - (50 + 30 * (text.length - (i + 1))))
            })
            let dataUrl = canvas.toDataURL("image/jpeg", 1)
            resolve(this.dataURLtoFile(dataUrl, file.name))
          };
        };
      });
    },


    /**
     * @name uploadHandlePreview
     * @param file
     * @param control
     * @description 文件预览
     */
    uploadHandlePreview(file, control) {
      if (file.url) {
        let fileType = file.type
        if (fileType.indexOf('image') > -1) {
          this.previewImage = getFileAccessHttpUrl(file.url)
        } else if (fileType.indexOf('pdf') > -1) {
          this.$refs.PdfPreviewModal.previewFiles(getFileAccessHttpUrl(file.url))
        } else {
          this.uploadHandleDownload(file, control)
        }
      }
    },

    /**
     * @name uploadHandleSuccess
     * @param res
     * @param file
     * @param fileList
     * @param control
     */
    uploadHandleSuccess(res, file, fileList, control) {
      const files = this.formModel[control.controlName] || []
      if (res.code === 0) {
        //参考如下代码即可
        if (fileList.every(item => item.status === "success")) {
          //由于fileList是所有的文件包含之前已上传过的，这里需要做区分（带response的即为新上传的）
          fileList.map(item => {
            item.response && files.push(item.response.data);
          })
        }
      } else {
        let index = fileList.findIndex(i => i.uid === file.uid)
        if (index !== -1) {
          fileList.splice(index, 1)
        }
        this.$message({message: res.msg || "上传失败!", type: 'error', duration: 1500})
      }
    },

    /**
     * @name 文件下载
     * @param file
     * @description 新窗口打开
     */
    uploadHandleDownload(file) {
      if (file.filePath) window.open(getFileAccessHttpUrl(DefaultUrl.downloadUrl + file.configId + "/get/" + file.filePath))
    },

    /**
     * 超过设置文件上传上限时
     * @param file
     * @param controlProps
     */
    uploadHandleExceed(file, controlProps) {
      this.$message.error(`文件数量超过限制,最大允许上传 ${controlProps.limit} 个文件`)
    },

    /**
     * @name uploadHandleRemove
     * @param file
     * @param controlName
     */
    uploadHandleRemove(file, fileList, controlName) {
      this.formModel[controlName] = fileList.filter(i => i.uid !== file.uid)
    },

    initFileList(fileList) {
      let result = []
      if(fileList && fileList instanceof Array) {
        fileList.forEach(file=>{
          result.push({
            ...file,
            url:getFileAccessHttpUrl(DefaultUrl.downloadUrl + file.configId + "/get/" + file.filePath)
          })
        })
      }
      return result;
    }
  }
}