feat: 图片上传，文件上传 100%-未测试

src/components/packages/formEditor/components/FormTypes/Signature/pc.vue

@@ -5,15 +5,17 @@ import Icon from '@ER/icon'
 import utils from '@ER/utils'
 import hooks from '@ER/hooks'
 export default {
-  name: 'er-signature',
-  inheritAttrs: false,
-  customOptions: {}
+	name: 'ErSignature',
+	inheritAttrs: false,
+	customOptions: {}
 }
 </script>
 <script setup>
-const {
-  t
-} = hooks.useI18n()
+import { ref } from 'vue'
+
+const { t } = hooks.useI18n()
+const { VITE_APP_BASE_API } = import.meta.env
+const downloadFileApi = ref(`${VITE_APP_BASE_API}/v1/oss/download?objectName=`)
 const props = defineProps(['data', 'params'])
 const ns = hooks.useNamespace('FormTypesSignature_pc')
 const element = ref()
@@ -24,139 +26,114 @@ const changed = ref(false)
 const loading = ref(false)
 let signaturePad = ''
 const resizeCanvas = () => {
-  const canvas = element.value
-  const data = signaturePad.toData()
-  const ratio = Math.max(window.devicePixelRatio || 1, 1)
-  canvas.width = canvas.offsetWidth * ratio
-  canvas.height = canvas.offsetHeight * ratio
-  canvas.getContext('2d').scale(ratio, ratio)
-  signaturePad.clear()
-  signaturePad.fromData(data)
+	const canvas = element.value
+	const data = signaturePad.toData()
+	const ratio = Math.max(window.devicePixelRatio || 1, 1)
+	canvas.width = canvas.offsetWidth * ratio
+	canvas.height = canvas.offsetHeight * ratio
+	canvas.getContext('2d').scale(ratio, ratio)
+	signaturePad.clear()
+	signaturePad.fromData(data)
 }
-watch(() => props.data.options.penColor, (newVal) => {
-  signaturePad && (signaturePad.penColor = newVal)
-})
+watch(
+	() => props.data.options.penColor,
+	newVal => {
+		signaturePad && (signaturePad.penColor = newVal)
+	}
+)
 // onBeforeUnmount(() => {
 //   window.removeEventListener('resize', resizeCanvas, false)
 // })
 const handleClear = () => {
-  signaturePad.clear()
-  showClear.value = true
+	signaturePad.clear()
+	showClear.value = true
 }
 const init = () => {
-  signaturePad = new SignaturePad(element.value, {
-    penColor: props.data.options.penColor
-  })
-  signaturePad.addEventListener('beginStroke', () => {
-    showClear.value = false
-    changed.value = true
-  })
-  resizeCanvas()
+	signaturePad = new SignaturePad(element.value, {
+		penColor: props.data.options.penColor
+	})
+	signaturePad.addEventListener('beginStroke', () => {
+		showClear.value = false
+		changed.value = true
+	})
+	resizeCanvas()
 }
 const handleOpen = () => {
-  dialogVisible.value = true
-  nextTick(() => {
-    init()
-  })
+	dialogVisible.value = true
+	nextTick(() => {
+		init()
+	})
 }
 const handleReOpen = () => {
-  if (props.params.disabled) return false
-  dialogVisible.value = true
-  showClear.value = false
-  changed.value = false
-  nextTick(() => {
-    init()
-    loading.value = true
-    utils.filetoDataURL(props.data.options.defaultValue.url).then(e => {
-      signaturePad.fromDataURL(e)
-      loading.value = false
-    })
-  })
+	if (props.params.disabled) return false
+	dialogVisible.value = true
+	showClear.value = false
+	changed.value = false
+	nextTick(() => {
+		init()
+		loading.value = true
+		utils.filetoDataURL(props.data.options.defaultValue.url).then(e => {
+			signaturePad.fromDataURL(e)
+			loading.value = false
+		})
+	})
 }
 const handleCommit = async () => {
-  if (!unref(changed)) {
-    dialogVisible.value = false
-    return false
-  }
-  loading.value = true
-  const form = new FormData()
-  form.append('file', utils.dataURLtoFile(signaturePad.toDataURL(), 'signature.png'))
-  try {
-    const response = await hooks.useFetch(props.data.options.action, {
-      method: 'post',
-      data: form,
-      headers: {
-        ...props.data.options.headers
-      }
-    })
-    console.log(response.data.objectName)
-    props.data.options.defaultValue = response.data[0]
-  } catch (e) {
-  }
-  dialogVisible.value = false
-  loading.value = false
+	if (!unref(changed)) {
+		dialogVisible.value = false
+		return false
+	}
+	loading.value = true
+	const form = new FormData()
+	form.append('file', utils.dataURLtoFile(signaturePad.toDataURL(), 'signature.png'))
+	try {
+		const response = await hooks.useFetch(props.data.options.action, {
+			method: 'post',
+			data: form,
+			headers: {
+				...props.data.options.headers
+			}
+		})
+		// props.data.options.defaultValue = response.data[0]
+		const { filename, objectName } = response.data || {}
+		props.data.options.defaultValue = { name: filename, url: `${downloadFileApi.value}${objectName}` }
+	} catch (e) {}
+	dialogVisible.value = false
+	loading.value = false
 }
 </script>
 <template>
-  <div
-    :class="[ns.b()]"
-  >
-    <template
-      v-if="data.options.defaultValue"
-    >
-      <el-image
-        @click="handleReOpen"
-        :src="data.options.defaultValue.url"
-        :fit="'contain'"
-        style="width: 100%; height: 100%;"
-      />
-      <Icon
-        v-if="!params.disabled"
-        @click="data.options.defaultValue = ''"
-        :class="[ns.e('clear')]"
-        icon="delete"/>
-    </template>
-    <div
-      v-else
-      :class="[ns.e('noData')]"
-    >
-      <el-button
-        @click="handleOpen"
-        text
-        circle
-        type="primary"
-        icon="Edit"
-        :disabled="params.disabled"
-      >
-        {{ t('er.form.addSignature') }}
-      </el-button>
-    </div>
-  </div>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="t('er.form.addSignature')"
-    width="900px"
-    destroy-on-close
-    :close-on-press-escape="false"
-    :close-on-click-modal="false"
-  >
-    <div v-loading="loading">
-      <canvas
-        :class="[ns.e('canvas')]"
-        ref="element"
-      ></canvas>
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button :disabled="showClear" @click="handleClear">{{ t('er.public.reset') }}</el-button>
-        <el-button :disabled="showClear" type="primary" @click="handleCommit">
-          {{ t('er.form.useSignature') }}
-        </el-button>
-      </span>
-    </template>
-  </el-dialog>
+	<div :class="[ns.b()]">
+		<template v-if="data.options.defaultValue">
+			<el-image :src="data.options.defaultValue.url" :fit="'contain'" style="width: 100%; height: 100%" @click="handleReOpen" />
+			<Icon v-if="!params.disabled" :class="[ns.e('clear')]" icon="delete" @click="data.options.defaultValue = ''" />
+		</template>
+		<div v-else :class="[ns.e('noData')]">
+			<el-button text circle type="primary" icon="Edit" :disabled="params.disabled" @click="handleOpen">
+				{{ t('er.form.addSignature') }}
+			</el-button>
+		</div>
+	</div>
+	<el-dialog
+		v-model="dialogVisible"
+		:title="t('er.form.addSignature')"
+		width="900px"
+		destroy-on-close
+		:close-on-press-escape="false"
+		:close-on-click-modal="false"
+	>
+		<div v-loading="loading">
+			<canvas ref="element" :class="[ns.e('canvas')]"></canvas>
+		</div>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button :disabled="showClear" @click="handleClear">{{ t('er.public.reset') }}</el-button>
+				<el-button :disabled="showClear" type="primary" @click="handleCommit">
+					{{ t('er.form.useSignature') }}
+				</el-button>
+			</span>
+		</template>
+	</el-dialog>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/packages/formEditor/components/FormTypes/Uploadfile/pc.vue

@@ -4,92 +4,108 @@ import { ElMessage } from 'element-plus'
 import hooks from '@ER/hooks'
 import _ from 'lodash-es'
 export default {
-  name: 'er-uploadfile',
-  inheritAttrs: false,
-  customOptions: {}
+	name: 'ErUploadfile',
+	inheritAttrs: false,
+	customOptions: {}
 }
 </script>
 <script setup>
-const {
-  t
-} = hooks.useI18n()
+import { ref } from 'vue'
+const { VITE_APP_BASE_API } = import.meta.env
+const downloadFileApi = ref(`${VITE_APP_BASE_API}/v1/oss/download?objectName=`)
+const { t } = hooks.useI18n()
 const props = defineProps(['data', 'params'])
 const fileList = ref(_.cloneDeep(props.data.options.defaultValue))
 const dialogImageUrl = ref(0)
 const dialogVisible = ref(false)
 const element = ref()
-watch(fileList, (arr) => {
-  const list = unref(fileList).map(e => {
-    let result = {}
-    if (e.response) {
-      result = e.response.data[0]
-    } else {
-      result = _.pick(e, ['name', 'url'])
-    }
-    return result
-  })
-  if (!_.isEqual(list, arr) || !list.length) {
-    props.data.options.defaultValue = _.cloneDeep(list)
-  }
-}, {
-  immediate: true,
-  deep: true
-})
-watch(() => props.data.options.defaultValue, (arr) => {
-  nextTick(() => {
-    if (arr.length === props.data.options.limit) {
-      element.value.$el.querySelector('.el-upload--picture-card').style.display = 'none'
-    } else {
-      element.value.$el.querySelector('.el-upload--picture-card').style.display = 'inline-flex'
-    }
-  })
-}, {
-  immediate: true,
-  deep: true
-})
-const handlePictureCardPreview = (uploadFile) => {
-  const url = uploadFile.response ? uploadFile.response.data[0].url : uploadFile.url
-  dialogImageUrl.value = props.data.options.defaultValue.map(e => e.url).indexOf(url)
-  dialogVisible.value = true
+watch(
+	fileList,
+	arr => {
+		const list = unref(fileList).map(e => {
+			let result = {}
+			if (e.response) {
+				// result = e.response.data[0]
+				const { filename, objectName } = e.response.data
+				result = { name: filename, url: `${downloadFileApi.value}${objectName}` }
+			} else {
+				result = _.pick(e, ['name', 'url'])
+			}
+			return result
+		})
+		if (!_.isEqual(list, arr) || !list.length) {
+			props.data.options.defaultValue = _.cloneDeep(list)
+		}
+	},
+	{
+		immediate: true,
+		deep: true
+	}
+)
+watch(
+	() => props.data.options.defaultValue,
+	arr => {
+		nextTick(() => {
+			if (arr.length === props.data.options.limit) {
+				element.value.$el.querySelector('.el-upload--picture-card').style.display = 'none'
+			} else {
+				element.value.$el.querySelector('.el-upload--picture-card').style.display = 'inline-flex'
+			}
+		})
+	},
+	{
+		immediate: true,
+		deep: true
+	}
+)
+const handlePictureCardPreview = uploadFile => {
+	// const url = uploadFile.response ? uploadFile.response.data[0].url : uploadFile.url
+	const url = uploadFile.response ? uploadFile.response.data.url : uploadFile.url
+	dialogImageUrl.value = props.data.options.defaultValue.map(e => e.url).indexOf(url)
+	dialogVisible.value = true
 }
-const beforeAvatarUpload = (rawFile) => {
-  if (rawFile.size > props.params.maxSize) {
-    ElMessage({
-      message: t('er.validateMsg.fileSize', { size: props.data.options.size }),
-      type: 'warning'
-    })
-    return false
-  }
-  return true
+const beforeAvatarUpload = rawFile => {
+	if (rawFile.size > props.params.maxSize) {
+		ElMessage({
+			message: t('er.validateMsg.fileSize', { size: props.data.options.size }),
+			type: 'warning'
+		})
+		return false
+	}
+	return true
 }
-const handleError = (error) => {
-  ElMessage.error(error.toString())
-  // ElMessage({
-  //   message: 'Warning, this is a warning message.',
-  //   type: 'warning',
-  // })
+const handleError = error => {
+	ElMessage.error(error.toString())
+	// ElMessage({
+	//   message: 'Warning, this is a warning message.',
+	//   type: 'warning',
+	// })
 }
 </script>
 <template>
-  <el-upload
-    v-model:file-list="fileList"
-    v-bind="params"
-    list-type="picture-card"
-    ref="element"
-    :on-preview="handlePictureCardPreview"
-    :before-upload="beforeAvatarUpload"
-    :on-error="handleError"
-  >
-    <el-icon>
-      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"></path></svg>
-    </el-icon>
-  </el-upload>
-
-  <el-image-viewer
-    v-if="dialogVisible"
-    :initial-index="dialogImageUrl"
-    :url-list="data.options.defaultValue.map(e => e.url)"
-    @close="dialogVisible = false"
-  ></el-image-viewer>
+	<el-upload
+		v-bind="params"
+		ref="element"
+		v-model:file-list="fileList"
+		list-type="picture-card"
+		:on-preview="handlePictureCardPreview"
+		:before-upload="beforeAvatarUpload"
+		:on-error="handleError"
+	>
+		<el-icon>
+			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+				<path
+					fill="currentColor"
+					d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"
+				></path>
+			</svg>
+		</el-icon>
+	</el-upload>
 
+	<el-image-viewer
+		v-if="dialogVisible"
+		:initial-index="dialogImageUrl"
+		:url-list="data.options.defaultValue.map(e => e.url)"
+		@close="dialogVisible = false"
+	></el-image-viewer>
 </template>