前端通过函数方法触发文件上传、限制文件类型、限制文件大小、上传的进度

包含文件列的表格

  <vxe-tableref="table"border:row-config="{ isHover: true }"highlight-hover-rowalign="center"stripe:data="tableAll.data"><vxe-columntype="seq"title="序号"width="60"align="center"></vxe-column><vxe-columnwidth="260"title="附件类型"field="type"align="center"></vxe-column><vxe-columntitle="附件名称"field="fileName"header-align="center"align="left"><vxe-columntitle="操作"width="260"align="center"><template #default="{ row }"><div class="btns"><el-tooltipcontent="预览"placement="top"><iclass="icon icon-view"@click="handleFileView(row)"v-if="row.fileName"></i></el-tooltip><el-tooltipcontent="上传"placement="top"><iclass="icon icon-up"@click="handleFileUpload(row)"v-if="!row.fileName"></i></el-tooltip><el-tooltipcontent="下载"placement="top"><iclass="icon icon-down"@click="handleFileDown(row)"v-if="row.fileName"></i></el-tooltip><el-tooltipcontent="删除"placement="top"><iclass="icon icon-del-min"@click="handleFileDel(row)"v-if="row.fileName"></i></el-tooltip></div><el-progressv-if="row.type && row.type === currentFileName":percentage="progress":status="progress === 100 ? 'success' : undefined" /></template></vxe-column></vxe-table>

限制文件类型、限制文件大小、上传的进度、获取上传进度

 import { ElMessage } from 'element-plus';...async handleFileUpload(row) {const fileInput = document.createElement('input');fileInput.type = 'file';// 限制文件类型fileInput.accept = '.ppt,.pptx,.xls,.xlsx,.doc,.docx,.pdf,.ceb';// 隐藏文件上传标签fileInput.style.display = 'none';// 将文件上传标签插入到body底部document.body.appendChild(fileInput);// 触发文件上传fileInput.click();fileInput.onchange = async (e) => {const files = e.target.files;if (files.length === 0) {// 用户未选择文件或取消了文件选择fileInput.remove();return;}const allowedTypes = ['.ppt','.pptx','.xls','.xlsx','.doc','.docx','.pdf','.ceb',];// 获取文件扩展名const fileName = files[0].name;const fileExtension = fileName.slice(fileName.lastIndexOf('.'));// 检查文件类型是否在允许的类型中if (!allowedTypes.includes(fileExtension)) {ElMessage.error('文件类型不正确，请选择正确的文件格式(.ppt,.pptx,.xls,.xlsx,.doc,.docx,.pdf,.ceb)');fileInput.remove();return;}// 检查文件大小，限制为10MBconst maxSize = 10 * 1024 * 1024; // 10MBif (files[0].size > maxSize) {ElMessage.error('文件大小超过限制，请选择10MB以内的文件');fileInput.remove();return;}const formData = new FormData();formData.append('file', files[0]);this.currentFileName = row.type;try {const res = await http({method: 'post',url: '/file/upload/single/file',data: formData,params: {type: this.currentFileName,},onUploadProgress: (progressEvent) => {let complete =((progressEvent.loaded / progressEvent.total) * 100) | 0;// 这里为上传的进度this.progress = complete;},});if (res.data.code === 0) {this.$message.success('上传成功！');} else {this.$message.error(res.data.data);}} finally {this.currentFileName = '';this.progress = 0;fileInput.remove();// 刷新数据列表this.initData();}};},