123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <template>
- <el-upload ref="uploadRef" class="hc-file-upload-box" :action="api + action" :headers="getTokenHeader()" :data="uploadData" :accept="accept" :disabled="uploadDisabled" multiple :show-file-list="false"
- :on-success="uploadSuccess" :on-exceed="uploadExceed" :on-error="uploadError" :before-upload="beforeUpload" :on-progress="uploadprogress">
- <slot></slot>
- </el-upload>
- </template>
- <script setup>
- import {ref,watch,onMounted} from "vue";
- import {getTokenHeader} from '~src/api/request/header';
- import {isSize, deepClone, getObjValue} from "vue-utils-plus"
- const props = defineProps({
- datas: {
- type: Object,
- default: () => ({})
- },
- api: {
- type: String,
- default: "/api/blade-resource/oss/endpoint/"
- },
- action: {
- type: String,
- default: "upload-file"
- },
- accept: {
- type: String,
- default: "image/png,image/jpg,image/jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword"
- },
- size: {
- type: Number,
- default: 60
- }
- })
- //变量
- const uploadRef = ref(null)
- const uploadData = ref(props.datas)
- const uploadDisabled = ref(false)
- //监听
- watch(() => [
- props.datas,
- ], ([datas]) => {
- uploadData.value = datas
- })
- //渲染完成
- onMounted(()=> {
- beforeFileNum.value = 0
- finishFileNum.value = 0
- errorFileNum.value = 0
- })
- //事件
- const emit = defineEmits(['change', 'progress'])
- //上传前
- const beforeFileNum = ref(0)
- const beforeUpload = async (file) => {
- if (isSize(file?.size, props.size)) {
- beforeFileNum.value ++;
- return true;
- } else {
- beforeFileNum.value = 0;
- window?.$message?.warning(`文件大小, 不能过${props.size}M!`);
- return false;
- }
- }
- //超出限制时
- const uploadExceed = () => {
- window?.$message?.warning(`请上传 ${props.accept} 格式的文件,文件大小不超过${props.size}M`);
- }
- //上传中
- const uploadprogress = () => {
- uploadDisabled.value = true
- emit('progress', true)
- }
- //上传完成
- const finishFileNum = ref(0)
- const uploadSuccess = (response, uploadFile, uploadFiles) => {
- finishFileNum.value ++;
- if (beforeFileNum.value === finishFileNum.value) {
- const fileList = getUploadFile(deepClone(uploadFiles))
- uploadClearFiles()
- emit('change', {type: 'success', fileList})
- emit('progress', false)
- }
- }
- //上传失败
- const errorFileNum = ref(0)
- const uploadError = (error,uploadFile,uploadFiles) => {
- errorFileNum.value ++;
- window?.$message?.error('上传失败');
- const num = finishFileNum.value + errorFileNum.value;
- if (beforeFileNum.value === num) {
- const fileList = getUploadFile(deepClone(uploadFiles))
- uploadClearFiles()
- emit('change', {type: 'error', fileList})
- emit('progress', false)
- }
- }
- const uploadClearFiles = () => {
- finishFileNum.value = 0
- beforeFileNum.value = 0
- errorFileNum.value = 0
- uploadDisabled.value = false
- uploadRef.value?.clearFiles()
- }
- //获取文件
- const getUploadFile = (fileList) => {
- let fileArr = [];
- for (let i = 0; i < fileList.length; i++) {
- const item = getObjValue(fileList[i]?.response?.data)
- fileArr.push(item)
- }
- return fileArr
- }
- </script>
- <style lang="scss">
- .hc-file-upload-box .el-upload-list .el-upload-list__item {
- .el-upload-list__item-status-label, .el-icon--close-tip {
- display: none;
- }
- }
- </style>
|