上传文件及文件类型判断(基于vue3)

上传文件及文件类型判断(基于vue3)

即上篇文章(上传图片)之后，一而再、再而三给出上传文件dome。直接上湿货

父组件

<el-form-item label="上传附件" class="formCell"><UploadFileref="uploadFileInfoRef":upload-file-info="uploadFileInfo"@uploadFile="getUploadFile"@delFile="delFile"></UploadFile>
</el-form-item>

//限制文件大小
const uploadFileInfo = ref({limitFileSize: false,maxSize: 0,
})
//定义子组件ref 用来和子组件交互
const uploadFileInfoRef = ref(null)
//上传文件
const getUploadFile = (e) => {uploadFileInfoRef.value.fileListArr = e
}
//删除文件
const delFile = (e) => {uploadFileInfoRef.value.fileListArr = e
}

子组件代码

<template><el-upload:show-file-list="false":auto-upload="false"accept=".word,.png,.jpeg,.jpg,.gif,.mp4,.ppt,.pptx,.pdf,.xlsx,.xls,txt,bmp,.docx,.doc":on-change="getUploadFile"class="uploadFile"><span class="fileBtn">添加文件</span></el-upload><div v-if="fileData.length" class="fileList"><ul><liv-for="(item, index) in fileData":key="item.timeid":class="['file-item', `file-item-${pe}`]"><div>{{ item.name }}</div><button @click="handleDelFile(item.timeid, index)"><img src="./images/del.png" alt="" />删除</button></li></ul></div>
</template>

*注意:accept=“.word,.png,.jpeg,.jpg,.gif,.mp4,.ppt,.pptx,.pdf,.xlsx,.xls,txt,bmp,.docx,.doc”；虽然这里定义了上传文件类型，但是在选择框里选择的时候还是可以选择所有文件类型
这样操作还是有违具体需求，下面有具体文件处理文件格式(FileHandle)
*

<script setup>
import { ref, computed, watch } from 'vue'
import { FileHandle } from '@/units'//处理文件格式的文件
import { DialogModel } from '@/components'
const { handleUploadFile } = FileHandle()//处理文件格式的js
const props = defineProps({uploadFileInfo: {type: Object,default: () => {return {}},},
})
const tempValue = ref(props.uploadFileInfo)
//文件的限制条件
const showUploadFileInfo = computed(() => {return tempValue.value
})
// 上传文件定义导出有关事件
const emits = defineEmits(['uploadFile', 'delFile'])let fileData = ref([])
const fileListArr = ref([])
const fileSumSize = ref([])
//上传文件
const getUploadFile = async (files) => {showUploadFileInfo.value.limitFileSize && (await limitFileSize(files))fileSumSize.value.push(files.size)let fileObj = await handleUploadFile(files.raw)if (fileObj) {fileData.value.push(fileObj)fileListArr.value.push(fileObj.path)}emits('uploadFile', fileListArr.value)
}
//删除文件
const handleDelFile = (timeid, index) => {fileData.value = fileData.value.filter((item) => {return item.timeid != timeid})fileListArr.value.splice(index, 1)fileSumSize.value.splice(index, 1)//将删除文件的事件导出去供父组件使用emits('delFile', fileListArr.value)
}
// 计算文件总大小
const sum = (arr) => {return eval(arr.join('+'))
}
// 限制文件大小
const limitFileSize = (files) => {return new Promise((resolve, reject) => {if (sum(fileSumSize.value) / 1024 / 1024 > showUploadFileInfo.value.maxSize ||files.size / 1024 / 1024 > showUploadFileInfo.value.maxSize) {DialogModel({message: `附件总大小不能超过${showUploadFileInfo.value.maxSize}M!`,cancelable: false,confirm: fialComfilmBtn,})reject(false)} else {resolve(true)}})
}
//监听文件数据
watch(() => fileData.value,() => {return fileData.value}
)
//将文件暴漏出去供父组件使用
defineExpose({fileData,fileListArr,
})
const fialComfilmBtn = () => {}
</script>

<style scoped>
.uploadFile {width: 126px;height: 44px;border: 1px solid rgba(0, 22, 93, 0.2) !important;border-radius: 10px;
}
.fileBtn {width: 126px;height: 44px;font-size: 18px;font-weight: 400;color: #a2abc7;content: '';background-image: url(./images/uploadFile.png);background-size: 16px 18px;background-repeat: no-repeat;background-position: 16px;text-indent: 20px;display: flex;align-items: center;justify-content: center;
}
.fileList {width: 100%;
}
.fileList li {width: 100%;height: 48px;background: #f9fbff;border: 1px solid #e9eeff;opacity: 1;border-radius: 5px;margin-top: 10px;
}
.file-item {display: flex;width: 664px;height: 50px;line-height: 50px;font-size: 18px;color: #00165d;padding-left: 46px;position: relative;
}
.file-item > div {margin-right: 30px;
}
.file-list .file-item:last-of-type {border-bottom: none;
}
.file-item button {color: #ff6060;text-decoration: underline;display: flex;align-items: center;
}
.file-item button img {width: 18px;height: 18px;margin-right: 10px;
}
.file-item::before {content: '';position: absolute;left: 16px;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;
}
//这里的图片根据具体需求更换即可
.file-item.file-item-image::before {background: url(./images/image.png) no-repeat;background-size: 100% 100%;
}.file-item.file-item-word::before {background: url(./images/word.png) no-repeat;background-size: 100% 100%;
}.file-item.file-item-excel::before {background: url(./images/excel.png) no-repeat;background-size: 100% 100%;
}

到此上传文件已经完结,总体没有什么难点,对于刚入坑的程序猿(猿)来说,文件格式的处理可能稍微有点难度。下面有文件格式处理的专机~~~