<!--
|
* @Description: 本系统用的上传组件 只能上传图片和pdf 单个文件
|
* @Version: 2.0
|
* @Autor: wuyun
|
* @Date: 2022-08-19 09:43:21
|
* @LastEditors: wuyun
|
* @LastEditTime: 2022-08-30 11:38:14
|
-->
|
<template>
|
<div>
|
<el-upload ref="upload"
|
class="avatar-uploader"
|
action=""
|
:accept="accept"
|
:limit="limit"
|
:fileList="state.fileList"
|
:on-exceed="handleExceed"
|
list-type="picture-card"
|
:before-upload="handleBeforeUpload"
|
:http-request="uploadRequest"
|
:on-preview="handlePreview"
|
:on-remove="handleRemoveFile"
|
>
|
<el-icon>
|
<Plus/>
|
</el-icon>
|
</el-upload>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import {ElNotification, ElMessage, UploadRawFile, UploadRequestOptions, genFileId} from 'element-plus'
|
import type {FormInstance, FormRules, UploadInstance, UploadProps, UploadUserFile} from 'element-plus'
|
import {Refresh} from '@element-plus/icons-vue'
|
import commonApi from "@/api/commonApi";
|
|
interface Props {
|
accept?: string
|
limit?: number | undefined
|
files?: UploadUserFile[]
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
accept: 'jpg,jpeg,png,bmp,gif',
|
limit: 1,
|
fileList: () => []
|
})
|
|
interface State {
|
btnLoading: boolean
|
fileList: UploadUserFile[]
|
}
|
|
const state = reactive<any>({
|
btnLoading: false,
|
fileList: [],
|
formData: {
|
fileList: [], // 上传
|
fileIds: [] as string[],
|
},
|
fileObj: {
|
id: '',
|
orderId: '',
|
orderLogId: '',
|
fileId: '',
|
bucket: '',
|
originalName: '',
|
encryptedName: '',
|
suffix: '',
|
size: undefined,
|
url: '',
|
isImg: false
|
},
|
})
|
const emit = defineEmits(['update:fileList', 'removeFile'])
|
const upload = ref<UploadInstance>()
|
|
const handleExceed = () => {
|
|
}
|
// // 新上传的组件覆盖之前的组件
|
// const handleExceed: UploadProps['onExceed'] = (files) => {
|
// // upload.value!.clearFiles()
|
// // const file = files[0] as UploadRawFile
|
// // file.uid = genFileId()
|
// // upload.value!.handleStart(file)
|
// // upload.value!.submit()
|
// emit('emitExceed')
|
// }
|
//
|
// async function uploadRequest(options: UploadRequestOptions): Promise<any> {
|
// console.log('options', options)
|
// const fileData = new FormData()
|
// fileData.append('file', options.file)
|
// state.btnLoading = true
|
// emit('emitUploadRequest', fileData, (res: boolean) => {
|
// state.btnLoading = false
|
// })
|
// }
|
//
|
// /**
|
// * 在 before-upload 钩子中限制用户上传文件的格式和大小
|
// */
|
// const handleBeforeUpload = (file: UploadRawFile) => {
|
// var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
|
// const extension = testmsg === 'jpg'
|
// const extension2 = testmsg === 'jpeg'
|
// const extension3 = testmsg === 'png'
|
// const extension4 = testmsg === 'gif'
|
// const extension5 = testmsg === 'bmp'
|
// const extension6 = testmsg === 'pdf'
|
// if (!extension && !extension2 && !extension3 && !extension4 && !extension5 && !extension6) {
|
// ElNotification({
|
// type: 'warning',
|
// message: '上传文件只能是.jpg/.jpeg/.png/.gif/.pdf格式!'
|
// })
|
// }
|
// return extension || extension2 || extension3 || extension4 || extension5 || extension6
|
// }
|
|
|
// 上传校验
|
const handleBeforeUpload = (file: UploadRawFile) => {
|
// // console.log('文件上传---------->', file)
|
// if (file.name.length > 41) {
|
// ElNotification({
|
// type: 'warning',
|
// message: '上传文件名字过长!'
|
// })
|
// return
|
// }
|
//
|
// if (file.size >= 10485760) {
|
// ElNotification({
|
// type: 'warning',
|
// message: '上传文件过大0000!'
|
// })
|
// return
|
// }
|
//
|
// var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
|
// state.fileNameData = file.name.substring(0, file.name.lastIndexOf("."))
|
// state.nameSuffix = testmsg
|
// const extension = testmsg === 'jpg'
|
// const extension2 = testmsg === 'jpeg'
|
// const extension3 = testmsg === 'png'
|
// if (!extension && !extension2 && !extension3) {
|
// ElNotification({
|
// type: 'warning',
|
// message: '上传文件只能是.jpg/.jpeg/.png!'
|
// })
|
//
|
// return
|
// }
|
// // return extension || extension2 || extension3
|
|
}
|
|
// 图片上传
|
async function uploadRequest(options: UploadRequestOptions): Promise<any> {
|
|
if (options.file.size >= 10485760) {
|
ElNotification({
|
type: 'warning',
|
message: '上传文件过大!'
|
})
|
state.fileList = []
|
return
|
}
|
|
|
var testmsg = options.file.name.substring(options.file.name.lastIndexOf('.') + 1)
|
state.fileNameData = options.file.name.substring(0, options.file.name.lastIndexOf("."))
|
const extension = testmsg === 'jpg'
|
const extension2 = testmsg === 'jpeg'
|
const extension3 = testmsg === 'png'
|
if (!extension && !extension2 && !extension3) {
|
ElNotification({
|
type: 'warning',
|
message: '上传文件只能是.jpg/.jpeg/.png!'
|
})
|
state.fileList = []
|
return
|
}
|
|
|
const formData = new FormData()
|
formData.append('file', options.file)
|
state.formData.fileIds = []
|
try {
|
const res = await commonApi.uploadFile(formData)
|
state.formData.fileIds.push(res.data.fileId)
|
state.fileObj.fileId = res.data.fileId
|
ElNotification({
|
type: 'success',
|
message: '上传成功！'
|
})
|
|
|
emit('update:fileList', res.data.fileId)
|
|
|
} catch (err) {
|
ElNotification({
|
type: 'error',
|
message: '上传失败，请重试！'
|
})
|
}
|
}
|
|
// 预览/下载
|
const handlePreview = (file?: any) => {
|
// // if (state.fileObj.isImg) {
|
// getImgFlowUrl(state.fileObj.fileId || '').then((res: any) => {
|
// console.log("查看图片-----", res.data)
|
// if (window.URL.createObjectURL != undefined) {
|
// const myBlob = new window.Blob([res.data], {type: 'image/jpeg'})
|
// const url = window.URL.createObjectURL(myBlob)
|
// state.fileObj.url = url
|
// imageUrl.value = url
|
//
|
// // 预览图片弹框
|
// imgViewDialogVisible.value = true
|
// }
|
// })
|
// // }
|
}
|
|
// 删除图片
|
const handleRemoveFile = (UploadFile: UploadFile) => {
|
// 重置关于图片的数据
|
state.formData.fileList = []
|
state.formData.fileIds = []
|
state.formData.fileId = ''
|
state.fileObj = {
|
id: '',
|
orderId: '',
|
orderLogId: '',
|
fileId: '',
|
bucket: '',
|
originalName: '',
|
encryptedName: '',
|
suffix: '',
|
size: undefined,
|
url: '',
|
isImg: false
|
}
|
emit('removeFile')
|
|
upload && upload.value?.clearFiles()
|
|
}
|
|
const clearUploadFile = () => {
|
// upload.value && upload.value.clearFiles()
|
state.fileList = []
|
// 重置关于图片的数据
|
state.formData.fileList = []
|
state.formData.fileIds = []
|
state.formData.fileId = ''
|
state.fileObj = {
|
id: '',
|
orderId: '',
|
orderLogId: '',
|
fileId: '',
|
bucket: '',
|
originalName: '',
|
encryptedName: '',
|
suffix: '',
|
size: undefined,
|
url: '',
|
isImg: false
|
}
|
}
|
|
// 获取到图片
|
const getPicUrlFun = (data?: any) => {
|
console.log(data)
|
state.fileList = []
|
state.fileList = data
|
}
|
|
|
watchEffect(() => {
|
// console.log("999999999999999",props.fileList)
|
})
|
|
// 将方法暴露给父组件
|
defineExpose({clearUploadFile, getPicUrlFun})
|
</script>
|
