|
@@ -1,81 +1,87 @@
|
|
|
-<template>
|
|
|
- <el-upload
|
|
|
- class="upload-demo"
|
|
|
- v-model:file-list="fileList"
|
|
|
- drag
|
|
|
- :headers="{ Authorization: 'Bearer ' + useUserInfoStores.getToken()}"
|
|
|
- :action='baseUrl+"/api/app/qr-book/upload-file"'
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- >
|
|
|
- <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
- <div class="el-upload__text">
|
|
|
- 将文件拖到此处/<em>点击上传</em>
|
|
|
- </div>
|
|
|
- <template #tip>
|
|
|
- <div class="el-upload__tip">
|
|
|
- 说明书上传
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-upload>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script setup lang="ts">
|
|
|
- import { UploadFilled} from "@element-plus/icons-vue";
|
|
|
- import { useUserInfo } from '/@/stores/userInfo'
|
|
|
- import {ElMessage, UploadProps, UploadUserFile} from "element-plus";
|
|
|
- import { onMounted, ref, watch } from "vue";
|
|
|
-
|
|
|
- const useUserInfoStores = useUserInfo()
|
|
|
-
|
|
|
- const emits = defineEmits(['onUpload'])
|
|
|
-
|
|
|
- const fileList = ref<UploadUserFile[]>([])
|
|
|
-
|
|
|
- const baseUrl = import.meta.env.VITE_API_URL
|
|
|
-
|
|
|
- //接受父组件的传值
|
|
|
- const props = defineProps({
|
|
|
- file:{} as any
|
|
|
- })
|
|
|
- const file = ref(props.file)
|
|
|
-
|
|
|
- // watch(() => props.file.fileUrl, (val)=> {
|
|
|
- // file.value.fileUrl = val
|
|
|
- // if(file.value.fileUrl) {
|
|
|
- // fileList.value = [{name:file.value.fileName,url:file.value.fileUrl} as UploadUserFile]
|
|
|
- // }else{
|
|
|
- // fileList.value = []
|
|
|
- // }
|
|
|
- // })
|
|
|
- watch(() => props.file.fileName, (val)=> {
|
|
|
- file.value.fileName = val
|
|
|
- if(val) fileList.value = [{name:val}]
|
|
|
- })
|
|
|
-
|
|
|
- const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
|
|
- response,
|
|
|
- ) => {
|
|
|
- const res = response?.data
|
|
|
- fileList.value = [{name:res.fileName+res.extension}]
|
|
|
- file.value.guid = res.guid
|
|
|
- file.value.fileName = res.fileName,
|
|
|
- file.value.extension = res.extension
|
|
|
- emits('onUpload',file.value)
|
|
|
- }
|
|
|
-
|
|
|
- const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
-
|
|
|
- if (rawFile.size / 1024 / 1024 > 100) {
|
|
|
- ElMessage.error('文件超过100MB!')
|
|
|
-
|
|
|
- return false
|
|
|
- }
|
|
|
- return true
|
|
|
- }
|
|
|
-
|
|
|
- onMounted(()=>{
|
|
|
- if(file.value.fileName) fileList.value = [{name:file.value.fileName} as UploadUserFile]
|
|
|
- })
|
|
|
- </script>
|
|
|
+<template>
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ drag
|
|
|
+ :headers="{ Authorization: 'Bearer ' + useUserInfoStores.getToken()}"
|
|
|
+ :action='baseUrl+"/api/app/qr-book/upload-file"'
|
|
|
+ :data="{guidStr:file.guid === undefined ? '' : file.guid}"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 将文件拖到此处/<em>点击上传</em>
|
|
|
+ </div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ 说明书上传
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script setup lang="ts">
|
|
|
+ import { UploadFilled} from "@element-plus/icons-vue";
|
|
|
+ import { useUserInfo } from '/@/stores/userInfo'
|
|
|
+ import {ElMessage, UploadProps, UploadUserFile} from "element-plus";
|
|
|
+ import { onMounted, ref, watch } from "vue";
|
|
|
+import { fi } from "element-plus/es/locale";
|
|
|
+
|
|
|
+ const useUserInfoStores = useUserInfo()
|
|
|
+
|
|
|
+ const emits = defineEmits(['onUpload'])
|
|
|
+
|
|
|
+ const fileList = ref<UploadUserFile[]>([])
|
|
|
+
|
|
|
+ const baseUrl = import.meta.env.VITE_API_URL
|
|
|
+
|
|
|
+ //接受父组件的传值
|
|
|
+ const props = defineProps({
|
|
|
+ file:{} as any
|
|
|
+ })
|
|
|
+ const file = ref(props.file)
|
|
|
+
|
|
|
+ // watch(() => props.file.fileUrl, (val)=> {
|
|
|
+ // file.value.fileUrl = val
|
|
|
+ // if(file.value.fileUrl) {
|
|
|
+ // fileList.value = [{name:file.value.fileName,url:file.value.fileUrl} as UploadUserFile]
|
|
|
+ // }else{
|
|
|
+ // fileList.value = []
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ watch(() => props.file, (val)=> {
|
|
|
+ file.value.fileName = val.fileName
|
|
|
+ file.value.guid = val.guid
|
|
|
+ if(val) fileList.value = [{name:val.fileName}]
|
|
|
+ })
|
|
|
+
|
|
|
+ const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
|
|
+ response,
|
|
|
+ ) => {
|
|
|
+ const res = response?.data
|
|
|
+ fileList.value = [{name:res.fileName+res.extension}]
|
|
|
+ file.value.guid = res.guid
|
|
|
+ file.value.fileName = res.fileName,
|
|
|
+ file.value.extension = res.extension
|
|
|
+ emits('onUpload',file.value)
|
|
|
+ }
|
|
|
+
|
|
|
+ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
+
|
|
|
+ console.log(file.value)
|
|
|
+ if (rawFile.size / 1024 / 1024 > 100) {
|
|
|
+ ElMessage.error('文件超过100MB!')
|
|
|
+
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(()=>{
|
|
|
+ console.log(file.value)
|
|
|
+ if(file.value.fileName) fileList.value = [{name:file.value.fileName} as UploadUserFile]
|
|
|
+ // if(!file.value.guid)
|
|
|
+ })
|
|
|
+ </script>
|
|
|
|