agilebuilder-ui 1.1.65-tmp3 → 1.1.65-tmp31

package/packages/fs-upload-new/src/file-upload-mobile/file-upload-browser.vue

@@ -1,573 +0,0 @@
-<template>
-  <div>
-    <FileUploadComponent
-      ref="fileUploadRef"
-      :disabled="disabled"
-      :systemCode="systemCode"
-      :accept="accept"
-      :multiple="multiple"
-      :limitFileSize="limitFileSize"
-      :fileList="fileListResult"
-      :beforeRemove="beforeRemove"
-      :onRemove="onRemove"
-      :beforeDownload="beforeDownload"
-      :baseURL="baseURLVal"
-      :watermark="watermark"
-      @chooseFile="pickBrowserFiles"
-      @remove="removeFile"
-    />
-    <template
-      v-if="openCameraOrChoosePhoto === 'openChoosePhoto' || openCameraOrChoosePhoto === 'openCameraAndChoosePhoto'"
-    >
-      <input
-        ref="fileRef"
-        type="file"
-        :multiple="multipleUpload"
-        name="file"
-        :accept="myAccept"
-        style="display: none"
-        @change="uploadFiles"
-      />
-    </template>
-    <template v-else>
-      <!-- 由于直接打开capture相机属性的设置为空或者不是user/environment其中的任意一项时会打开的本地捕获音频 麦克风-->
-      <!-- 所有使用 template 可查看 https://w3c.github.io/html-media-capture/#introduction -->
-      <input
-        ref="fileRef"
-        type="file"
-        :multiple="multipleUpload"
-        capture="environment"
-        name="file"
-        :accept="myAccept"
-        style="display: none"
-        @change="uploadFiles"
-      />
-    </template>
-    <el-drawer v-model="fileTypeFlag" direction="btt" @close="fileTypeFlag = false">
-      <div>
-        <el-button link @click="confirmFileType('image')">
-          {{ $t('fsUpload.image') }}
-        </el-button>
-      </div>
-      <div>
-        <el-button link @click="confirmFileType('video')">
-          {{ $t('fsUpload.video') }}
-        </el-button>
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, defineEmits } from 'vue'
-import { getReplaceUrlDomain, formatFileName, isDingTalkEnv } from '../../../../src/utils/common-util'
-import { getToken, getCookieCache } from '../../../../src/utils/auth.js' // 获得token
-import Compressor from 'compressorjs'
-import { ElMessage } from 'element-plus'
-import { useI18n } from 'vue-i18n'
-import FileUploadComponent from './file-upload-component.vue'
-import { isRef } from 'vue'
-
-const props = defineProps({
-  openFsUpload: {
-    type: Object,
-    default: true
-  },
-  entity: {
-    type: Object,
-    default: () => {
-      return null
-    }
-  },
-  fileInfo: {
-    type: Object,
-    default: () => ({})
-  },
-  systemCode: {
-    type: String,
-    default: ''
-  },
-  displayType: {
-    type: String,
-    default: 'input'
-  },
-  // 是否禁止编辑，为true只能下载，不能删除和上传
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  accept: {
-    type: String,
-    default: ''
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  limit: {
-    type: Number,
-    default: 1
-  },
-  // 文件大小限制，单位是M，默认是30M
-  limitFileSize: {
-    type: Number,
-    default: 30
-  },
-  placeholder: {
-    type: String,
-    default: '拖拽文件 或 点击上传'
-  },
-  action: {
-    type: String,
-    default: ''
-  },
-  headers: {
-    type: Object,
-    default: () => ({ Authorization: null })
-  },
-  // 已上传文件列表
-  fileList: {
-    type: Array,
-    default: () => []
-  },
-  onSuccess: {
-    type: Function,
-    default: () => {}
-  },
-  beforeRemove: {
-    type: Function,
-    default: () => {}
-  },
-  onRemove: {
-    type: Function,
-    default: () => {}
-  },
-  beforeDownload: {
-    type: Function,
-    default: () => {}
-  },
-  pageContext: {
-    type: Object,
-    default: () => ({})
-  },
-  configure: {
-    type: Object,
-    default: () => ({})
-  },
-  // 组件id，在表单或列表中应该唯一，一般传字段名即可
-  componentId: {
-    type: String,
-    default: function () {
-      return 'file-upload'
-    }
-  },
-  // 组件名称，一般是字段label
-  componentName: {
-    type: String,
-    default: function () {
-      return 'file-upload'
-    }
-  },
-  // 列表编码
-  listCode: {
-    type: String,
-    default: null
-  },
-  // 打开相机和相册选项，默认是都可以打开
-  openCameraOrChoosePhoto: {
-    type: String,
-    default: 'openCameraAndChoosePhoto'
-  },
-  beforeUpload: {
-    type: Function,
-    default: () => {}
-  },
-  // 水印配置{isShowWatermark:true/false,content:'xxxxx'}
-  watermark:{
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const multipleUpload = ref<string | null>(null)
-if (props.multiple) {
-  multipleUpload.value = 'multiple'
-}
-const isDingTalk = ref(false)
-isDingTalk.value = isDingTalkEnv()
-
-const fileListResult = ref(props.fileList)
-
-let baseURL = window.$vueApp.config.globalProperties.baseURL
-if (props.pageContext && props.pageContext.backendUrl) {
-  baseURL = props.pageContext.backendUrl
-}
-if (!baseURL) {
-  baseURL = window.$vueApp.config.globalProperties.baseURL
-}
-const baseURLVal = ref(baseURL)
-
-const baseAPI = window.$vueApp.config.globalProperties.baseAPI
-const defaultAction = ref<string>('')
-
-if (props.action) {
-  defaultAction.value = props.action
-} else {
-  let tempAction = baseAPI + '/component/super-form/uploads'
-  if (props.multiple) {
-    tempAction = baseAPI + '/component/super-form/batch-uploads'
-  }
-  defaultAction.value = tempAction
-}
-
-defaultAction.value = getReplaceUrlDomain(defaultAction.value)
-
-let myAccept = ref(props.accept ? props.accept : 'image/*')
-let tempFileList = ref([])
-let isUploading = ref(false)
-let isFile = ref(false)
-const fileRef = ref()
-const fileTypeFlag = ref(false)
-const emits = defineEmits(['remove', 'uploadend'])
-const { t } = useI18n()
-const fileUploadRef = ref(null)
-
-function isImg(file) {
-  const fileName = file.name
-  if (fileName) {
-    return (
-      fileName.indexOf('jpg') !== -1 ||
-      fileName.indexOf('JPG') !== -1 ||
-      fileName.indexOf('png') !== -1 ||
-      fileName.indexOf('PNG') !== -1
-    )
-  }
-  return false
-}
-
-function removeFile(param) {
-  console.log('removeFile----param=', param)
-  const file = param.file
-  if (file) {
-    emits('remove', { rmFiles: [file], serverFiles: fileListResult.value, index: param.index })
-  }
-}
-function pickBrowserFiles() {
-  // if (props.openCameraOrChoosePhoto && props.openCameraOrChoosePhoto === 'openCamera') {
-  // 只打开相机
-  myAccept.value = 'image/*'
-  if (isDingTalk.value) {
-    dingtalkChooseImage()
-  } else {
-    setTimeout(() => {
-      fileRef.value.click()
-    })
-  }
-  // } else {
-  //   // 相机和文件都可以选
-  //   myAccept.value = '*'
-  //   fileTypeFlag.value = true
-  // }
-}
-
-function confirmFileType(fileType: string) {
-  myAccept.value = ''
-  if (fileType && fileType === 'image') {
-    myAccept.value = 'image/*'
-  } else if (fileType && fileType === 'video') {
-    myAccept.value = 'video/*'
-  }
-  setTimeout(() => {
-    fileTypeFlag.value = false
-    fileRef.value.click()
-  })
-
-  console.log('Action chosen:', fileType)
-}
-
-async function uploadBrowserFile() {
-  const param = new FormData()
-  const fileNames = []
-  const selectFiles = []
-  let limitFileSize = props.limitFileSize
-  if (limitFileSize === undefined) {
-    // 默认是30M
-    limitFileSize = 30
-  }
-  let isCanUpload = false
-  const files = fileRef.value.files
-  for (let i = 0; i < files.length; i++) {
-    const newFile = files[i]
-    isCanUpload = validateCanUploadFile(newFile, limitFileSize)
-    if (isCanUpload) {
-      fileNames.push(newFile.name)
-    } else {
-      break
-    }
-  }
-  console.error('isCanUpload=', isCanUpload)
-  if (isCanUpload) {
-    for (let i = 0; i < files.length; i++) {
-      const fileObj = files[i]
-      console.error('fileObj.name=', fileObj.name, 'fileNames=', fileNames)
-      if (fileNames.indexOf(fileObj.name) >= 0) {
-        selectFiles.push(fileObj)
-      }
-      if (props.beforeUpload && typeof props.beforeUpload === 'function') {
-        const isMobile = true
-        // eslint-disable-next-line no-useless-call
-        isCanUpload = props.beforeUpload({
-          fileObj,
-          files: selectFiles,
-          isMobile,
-          pageContext: props.pageContext,
-          configureObj: props.configure
-        })
-      }
-    }
-  }
-  if (isCanUpload !== undefined && !isCanUpload) {
-    // 不能提交文件
-    return
-  }
-  if (!selectFiles || selectFiles.length === 0) {
-    console.error('未选择任何文件')
-    return
-  }
-  let uploadFiles: File[] = []
-  try {
-    uploadFiles = await compressionImg(selectFiles)
-  } catch (error) {
-    console.error('压缩图片失败', error)
-    uploadFiles = selectFiles
-  }
-  if (props.multiple) {
-    for (let i = 0; i < uploadFiles.length; i++) {
-      // param.append('files['+i+']', uploadFiles[i])
-      param.append('files', uploadFiles[i])
-      // param.append('files[]', uploadFiles[i])
-    }
-    // param.append('files', uploadFiles)
-    // 批量上传接口有这个参数，单文件上传没有该参数
-    param.append('limitFileSize', limitFileSize)
-  } else {
-    param.append('file', uploadFiles[0])
-  }
-  uploadFileToServer(param)
-}
-function validateCanUploadFile(file, limitFileSize) {
-  let isCanUpload = true
-  if (file.size > limitFileSize * 1024 * 1024) {
-    // 超过最大限制
-    ElMessage({
-      showClose: true,
-      type: 'warning',
-      message: t('imatrixUIMessage.exceedFileSize', { fileName: file.name, fileSize: limitFileSize })
-    })
-    // 返回false停止上传
-    isCanUpload = false
-  }
-  return isCanUpload
-}
-// 所有文件上传完毕后
-function uploadComplete(result) {
-  if (!fileListResult.value) {
-    fileListResult.value = []
-  }
-  if (props.multiple) {
-    fileListResult.value = fileListResult.value.concat(result)
-  } else {
-    // 单选时将已选文件移除，然后再替换为新上传的文件
-    const rmFiles = JSON.parse(JSON.stringify(fileListResult.value))
-    fileListResult.value = []
-    fileListResult.value.push(result)
-    emits('remove', { rmFiles, serverFiles: fileListResult.value, index: 0 })
-  }
-
-  fileRef.value.value = null
-  isUploading.value = false
-  fileUploadRef.value.changeFileList(fileListResult.value)
-  // 表示上传完成
-  emits('uploadend', fileListResult.value)
-}
-function uploadFiles() {
-  uploadBrowserFiles()
-}
-function uploadBrowserFiles() {
-  console.log('uploadBrowserFiles=====上传开始=')
-  const files = fileRef.value.files
-  if (files && files.length > 0) {
-    if (isDingTalk.value && !props.multiple && files.length > 1) {
-      // 清除文件列表
-      ElMessage({
-        showClose: true,
-        type: 'warning',
-        message: t('fsUpload.theNumberOfUploadsExceedsTheLimitTheLimitIs') + ': 1'
-      })
-      fileRef.value.value = null
-      return
-    } else {
-      isUploading.value = true
-      uploadBrowserFile()
-    }
-  } else {
-    uploadNoNewFiles()
-  }
-}
-
-// 文件上传时，无需要走后台上传时的处理
-function uploadNoNewFiles() {
-  fileRef.value.value = null
-
-  // 表示上传完成
-  emits('uploadend', fileListResult.value)
-}
-
-function compressionImg(selectFiles: File[]): Promise<File[]> {
-  const uploadFilesPromises: Promise<File>[] = []
-  for (let i = 0; i < selectFiles.length; i++) {
-    uploadFilesPromises.push(
-      new Promise<File>((resolve, reject) => {
-        console.log(`压缩前 size ${selectFiles[i].size / 1024 / 1024} MB`)
-        // eslint-disable-next-line no-new
-        new Compressor(selectFiles[i], {
-          quality: 0.7,
-          success(result) {
-            console.log(`压缩后 size ${result.size / 1024 / 1024} MB`)
-            resolve(
-              new File([result], selectFiles[i].name, {
-                type: result.type,
-                lastModified: Date.now()
-              })
-            )
-          },
-          error(err) {
-            reject(err)
-          }
-        })
-      })
-    )
-  }
-  return Promise.all(uploadFilesPromises)
-}
-
-function dingtalkChooseImage() {
-  let sourceType = ['album']
-  if (props.openCameraOrChoosePhoto === 'openCameraAndChoosePhoto') {
-    sourceType = ['album', 'camera']
-  } else if (props.openCameraOrChoosePhoto === 'openChoosePhoto') {
-    sourceType = ['album']
-  } else if (props.openCameraOrChoosePhoto === 'openCamera') {
-    sourceType = ['camera']
-  }
-  let count = 1
-  if (props.multiple) {
-    count = 20
-    if (props.limit) {
-      // 限制上传数量
-      if (fileListResult.value && fileListResult.value.length > 0) {
-        if (props.limit === fileListResult.value.length) {
-          ElMessage({
-            showClose: true,
-            type: 'warning',
-            message: t('fsUpload.theNumberOfUploadsExceedsTheLimitTheLimitIs') + ': ' + props.limit
-          })
-          return
-        }
-        count = props.limit - fileListResult.value.length
-      } else {
-        count = props.limit
-      }
-    }
-  }
-  window.top.$dd.biz.util
-    .chooseImage({
-      sourceType: sourceType,
-      count: count
-    })
-    .then(async (res) => {
-      console.log('dingtalkChooseImage res=', res)
-      // fileUploadRef.value.changeFileList(fileListResult.value)
-      if (res && res.filePaths && res.filePaths.length > 0) {
-        fetchDingTalkFile(res.files).then(async (sourceFiles) => {
-          let uploadFiles: File[] = []
-          try {
-            uploadFiles = await compressionImg(sourceFiles)
-          } catch (error) {
-            console.error('压缩图片失败', error)
-            uploadFiles = sourceFiles
-          }
-          if (uploadFiles && uploadFiles.length > 0) {
-            const param = new FormData()
-            let limitFileSize = props.limitFileSize
-            if (limitFileSize === undefined) {
-              // 默认是30M
-              limitFileSize = 30
-            }
-            if (props.multiple) {
-              if (fileListResult.value && fileListResult.value.length > 0) {
-                if (fileListResult.value.length + uploadFiles.length > props.limit) {
-                  ElMessage({
-                    showClose: true,
-                    type: 'warning',
-                    message: t('fsUpload.theNumberOfUploadsExceedsTheLimitTheLimitIs') + ': ' + props.limit
-                  })
-                  return
-                }
-              }
-              for (let i = 0; i < uploadFiles.length; i++) {
-                param.append('files', uploadFiles[i])
-              }
-            } else {
-              param.append('file', uploadFiles[0])
-            }
-            uploadFileToServer(param)
-          }
-        })
-      }
-    })
-}
-async function fetchDingTalkFile(files: any) {
-  const uploadFiles: any = []
-  for (let index = 0; index < files.length; index++) {
-    const file = files[index]
-    const response = await fetch(file.path)
-    const blob = await response.blob()
-    // https://resource/216576ea16afcbee18c392d15814827.image
-    const fileName = file.path.replace('https://resource/', '').replace('.image', '')
-    // 构造 File 对象
-    uploadFiles.push(new File([blob], fileName + '.' + file.fileType, { type: blob.type }))
-  }
-  return uploadFiles
-}
-
-function uploadFileToServer(param: FormData) {
-  param.append('systemCode', props.systemCode)
-  window.$vueApp.config.globalProperties.$http
-    .post(defaultAction.value, param, { headers: { 'Content-Type': 'multipart/form-data', Authorization: getToken() } })
-    .then((result) => {
-      // result：批量上传时返回的是集合，单选上传时返回的是对象
-      console.log('上传后返回值==result=', result)
-      if (result) {
-        if (props.multiple) {
-          if (result.length > 0) {
-            // this.tempFileList.push(...result)
-            uploadComplete(result)
-          } else {
-            console.error('多选时上传后返回值异常')
-          }
-        } else {
-          // this.tempFileList.push(result)
-          uploadComplete(result)
-        }
-      } else {
-        console.error('上传后返回值异常')
-      }
-    })
-    .catch(() => {
-      isUploading.value = false
-    })
-}
-</script>
-
-<style lang="scss" scoped></style>