秦皇岛网站推广报价,购买一个域名能建几个网站,防城港网站设计公司,电脑建网站软件1、html 代码#xff1a;
代码中的表格引入了 vxe-table 插件
Tag / 是自己封装的说明组件
表格列表这块我使用了插槽来增加扩展性#xff0c;可根据自己需求#xff0c;在组件外部做调整
templatediv classdragUploadel-dialo…1、html 代码
代码中的表格引入了 vxe-table 插件
Tag / 是自己封装的说明组件
表格列表这块我使用了插槽来增加扩展性可根据自己需求在组件外部做调整
templatediv classdragUploadel-dialog v-modeldata.visiblewidth35%center:draggabledraggable:destroy-on-closetrue:close-on-click-modalfalse:close-on-press-escapefalse:before-closecloseDialogFntemplate #headerh3{{ fileData.step 2 ? 提示文件超出大小限制 : 拖拽上传}}/h3/template!-- 文件上传区域 --div classdrag-boxv-iffileData.step 1dragoverhandleDragOverdragleavehandleDragOverdrophandleDropdiv classdiv-text div classdrag-tip拖拽文件至此区域span classclick-txt clicktoUploadFloder点击上传/span/divdiv classbtn-wrapel-button v-ifsingleFile clicktoUploadFile上传文件/el-buttonel-button clicktoUploadFloder上传文件夹/el-buttoninputv-ifsingleFile:style{ display: none }typefilereffileUploadRefchangehandleFileChangemultiple/input:style{ display: none }typefilereffileUploadFloderRefchangehandleFloderChangewebkitdirectorymultiple//div/div/div!-- 超出限制后展示的列表 --div v-iffileData.step 2!-- 组件内默认展示 --div classmax-h311 v-if!openSlotvxe-table:datafileData.goBeyondTableheight100%:checkbox-config{showHeader: true,trigger: cell}template #emptydiv classno-data-boxi classicon_noData/idiv classm-t6暂无数据/div/div/templatevxe-column min-width180 :title${data.fileName || SPU}文件名template #default{ row }{{ row[fileData.firstFileName] ? row[fileData.firstFileName] : -- }}/template/vxe-columnvxe-column min-width111 title大小template #default{ row }{{ row.size ? row.size : -- }} MB/template/vxe-columnvxe-column width100 title操作 :visiblefileData.goBeyondTable.length 1template #default{ $rowIndex, row }el-tooltipcontent移除placementtop:hide-after0a classicon_delete f-s18hrefjavscript:clickhandleDelete($rowIndex, row)/a/el-tooltip/template/vxe-column/vxe-table/div!-- 插槽可使用外部传入 --template v-elseslot nameerrorTable/slot/template/divTag classm-t12v-ifdata.fileSize:contentfileData.step 1 ? 文件大小不能超过 ${data.fileSize} MB : 文件大小不能超过 ${data.fileSize}MB目前文件大小 ${fileData.allSize} MB/template #footer v-iffileData.step 2div classdialog-footerel-button clickcloseDialogFn取消/el-button!-- 默认使用内部提交逻辑 --template v-if!openSlotel-button typeprimary clickhandleUploadToServer(true)提交/el-button/template!-- 开启插槽则使用外部自定义 --template v-elseslot namefooterBtn/slot/template/div/template/el-dialog/div
/template
2、js 代码
这块主要思路是将文件夹判断后进行递归获取出文件夹中的文件出来最后类似单个文件上传然后将文件流进行遍历 append 进创建的 FormData 对象。具体方法看readFiles()
script langts setup
import { reactive, ref, getCurrentInstance } from vue;const { proxy }: any getCurrentInstance();
const $tool proxy.$tool;const props defineProps({// 组件参数配置data: {type: Object,default: () ({// fileSize: 100, // 文件大小限制// imgType: [png, jpg, jpeg], // 图片类型限制// fileName: , // 超出后列表展示的文件名不传默认为SPU}),},// 是否支持窗口拖拽默认truedraggable: {type: Boolean,default: true},// 是否支持打开 file 单文件上传不传默认falsesingleFile: {type: Boolean,default: false},//是否需要开启列表上传失败 和 提交按钮插槽默认不开启展示组件内的失败列表 和 提交逻辑openSlot: {type: Boolean,default: false}
});/*** param dragUploadAxiosFn 上传接口抛出外部做处理不与组件内部逻辑耦合* param dragUploadErrorTable 超出限制后展示的列表插槽抛出外部做处理不与组件内部逻辑耦合*/
const emit defineEmits([dragUploadAxiosFn, dragUploadErrorTable]);const fileUploadRef ref();
const fileUploadFloderRef ref();const fileData: any reactive({step: 1, // 步骤 1文件拖拽上传2文件超出提示uploadList: [], //上传的文件列表waitUploadList: [], //存储待上传的文件列表fileSizeList: [], //存储遍历出来文件里面所有的图片路径及大小goBeyondTable: [], //超出限制后将遍历项还原成文件夹项展示的列表allSize: 0, //文件总大小 MBfirstFileName: pathName0 //第一列字段key
});/*文件上传input*/
const toUploadFile () {fileUploadRef.value.click();
};/*文件夹上传input*/
const toUploadFloder () {fileUploadFloderRef.value.click();
};/*选择文件改变*/
const handleFileChange (e: any) {if (e.target.files) {let filesList: any Array.from(e.target.files);filesList.forEach((item: any) {let size item.size / 1024 / 1024;fileData.allSize size;let obj: any getPath(item.name);changeFileSizeList(item, obj);});fileData.allSize fileData.allSize.toFixed(2); // 文件总大小 MBfileData.waitUploadList filesList;if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法handleUploadToServer(); //上传文件到服务器}
};/*文件夹目录上传*/
const handleFloderChange (e: any) {if (e.target.files) {let filesList: any Array.from(e.target.files);filesList.forEach((item: any) { let size item.size / 1024 / 1024;fileData.allSize size;let obj: any getPath(item.webkitRelativePath); // 通过路径获取名称方法changeFileSizeList(item, obj);});filesList.reverse(); // 反转数组保证最先选择的文件排在最后面fileData.allSize fileData.allSize.toFixed(2); // 文件总大小 MBfileData.waitUploadList filesList;if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法handleUploadToServer(); //上传文件到服务器}
};// 拖放进入目标区域
const handleDragOver (event) {event.preventDefault();
};// 拖拽放置
const handleDrop async (event) {event.preventDefault();const files [];const promises: any[] [];for (const item of event.dataTransfer.items) {const entry: any item.webkitGetAsEntry();if (!entry.isDirectory !props.singleFile) {proxy.$message.error(只支持文件夹上传不支持单个文件上传);return;}promises.push(readFiles(entry));}const resultFilesArrays await Promise.all(promises); // 等待所有文件读取完成fileData.waitUploadList resultFilesArrays.flat();if (!fileLimitFn(fileData.fileSizeList)) return; // 校验方法handleUploadToServer(); //上传文件到服务器
};//文件各种限制判断方法封装
const fileLimitFn (fileSizeList: any) {console.log(fileData.fileSizeList, fileData.fileSizeList);//文件大小超出限制if (props.data.fileSize) {if (!fileSizeLimit(fileSizeList)) { fileData.goBeyondTable getGoBeyondTable(fileSizeList);fileData.step 2;return false;}}//图片类型限制判断if (props.data.imgType) {if (!fileImgType(fileSizeList)) return false;}return true;
};//文件超出限制
const fileSizeLimit (fileSizeList: any) {let allSize fileSizeList.reduce((accumulator, currentValue) {if (currentValue) {return accumulator currentValue.size;}return accumulator;}, 0);let fileSize props.data.fileSize * 1024 * 1024;fileData.allSize (allSize / 1024 / 1024).toFixed(2); //存储文件总大小 MBif (allSize fileSize) {proxy.$message.error(文件大小不能超过 ${props.data.fileSize} MB);emit(dragUploadErrorTable, fileData);return false;}return true;
};// 文件中图片格式类型判断
const fileImgType (fileSizeList: any) {let findList: any fileSizeList.filter((item: any) !props.data.imgType.includes(item.type));if (findList.length 0) {proxy.$message.error(图片只能上传 ${props.data.imgType} 格式);return false;};return true;
};// 操作数据文件超出后展示的列表
const getGoBeyondTable (fileSizeList: any) {// 遍历相同第一列为一项size累加let result: any fileSizeList.reduce((accumulator, current) {if (accumulator[current[fileData.firstFileName]]) { //如果已经存在则累加sizeaccumulator[current[fileData.firstFileName]].size current.size;} else {accumulator[current[fileData.firstFileName]] { ...current };}return accumulator;}, {});// 将结果对象转换回数组result Object.values(result);// 处理size为MB单位result.forEach((item: any) {item.size (item.size / 1024 / 1024).toFixed(2);});return result;
};//移除超出文件列表的项
const handleDelete (rowIndex: number, row: any) {fileData.goBeyondTable.splice(rowIndex, 1);fileData.allSize (fileData.allSize - row.size).toFixed(2); //更新总大小MBfileData.fileSizeList fileData.fileSizeList.filter((item: any) item[fileData.firstFileName] ! row[fileData.firstFileName]);fileData.waitUploadList fileData.waitUploadList.filter((item: any) item[fileData.firstFileName] ! row[fileData.firstFileName]);
};/*请求上传到服务器*/
const handleUploadToServer (clcik?: boolean) {fileData.uploadList fileData.waitUploadList;if (clcik fileData.allSize props.data.fileSize) {proxy.$message.error(文件大小不能超过 ${props.data.fileSize} MB);return;}let formData new FormData();fileData.uploadList.forEach((item: any) {formData.append(${item.filePathName}, item);});// // 遍历FormData对象并打印其内容查看FormData对象数据是否正确// for (let [key, value] of formData.entries()) {// console.log(${key}: ${value});// }emit(dragUploadAxiosFn, formData, fileData.uploadList); //上传参数抛出外部做操作不在组件做耦合
};//此方法如果是文件夹则会递归调用自己所以最后都会走 else 的逻辑
const readFiles async (item: any) { if (item.isDirectory) {// 是一个文件夹const directoryReader item.createReader();// readEntries是一个异步方法const entries: any[] await new Promise((resolve, reject) {directoryReader.readEntries(resolve, reject);});let files [];for (const entry of entries) {const resultFiles: any await readFiles(entry);files files.concat(resultFiles);}return files;} else {// file也是一个异步方法const file await new Promise((resolve, reject) {item.file(resolve, reject);});let obj: any getPath(item.fullPath); //通过路径获取名称方法changeFileSizeList(file, obj);return [file];}
};//更改 fileData.fileSizeList 的值公共
const changeFileSizeList (file: any, obj: any) {file.filePathName obj.filePathName; //添加路径名称file[fileData.firstFileName] obj.pathObj[fileData.firstFileName]; //添加第一列文件名file.pathObj obj.pathObj;let index file.name.lastIndexOf(.);fileData.fileSizeList.push({ //添加图片路径、大小、名称filePathName: obj.filePathName,size: file.size,type: file.name.substring(index 1),...obj.pathObj});
};//通过路径获取名称方法公共
const getPath (path: string) {let filePathName: any path; // 传给后端的全路径if (path.startsWith(/)) { // 如果路径以斜杠开头则删除第一个斜杠filePathName path.slice(1);}let parts filePathName.split(/); // 路径分割成数组let pathObj {}; // 存储每个部分for (let i 0; i parts.length; i) {if (parts[i] ! ) { // 跳过空字符串如果路径以 / 开头或结尾pathObj[pathName (i)] parts[i];}}return {filePathName: filePathName,pathObj: pathObj}
};//关闭事件
const closeDialogFn () {if (fileData.step 1) {props.data.visible false; //关闭弹窗return;}proxy.$messageBox({title: 关闭,message: 关闭后不会保留您所做的更改确定关闭吗,callback: (value: string) {//confirm确认cancel取消if (value confirm) {fileData.step 1;props.data.visible false; //关闭弹窗}}});
};
/script
3、css 代码
style langscss scoped
.drag-box {position: relative;.progress-bar {position: absolute;z-index: 100;width: 100%;top: 0;left: 0px;right: 0px;bottom: -5px;display: flex;justify-content: center;align-items: center;background-color: rgba(255, 255, 255, 0.8);:deep(.el-progress.el-progress--line) {width: 100%;margin-left: 10px;}}.uploaded-list-wrap {max-height: 200px;overflow-y: auto;.uploaded-item {display: flex;justify-content: space-between;align-items: center;cursor: pointer;margin-bottom: 3px;.text-content {width: 80%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.icon {width: 25px;height: 25px;}.success-icon {display: block;}.delete-icon {display: none;}:hover {.success-icon {display: none;}.delete-icon {display: block;}}}}
}.div-text {width: 100%;height: 250px;border: 1px dashed #00b7ee;border-radius: 10px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 18px;.click-txt {color: #00b7ee;cursor: pointer;}.btn-wrap {margin-top: 20px;}
}.min-h311 {min-height: 311px;
}.max-h311 {max-height: 311px;
}:deep(.el-dialog .el-dialog__header) {padding: 12px 16px;
}:deep(.el-dialog .el-dialog__body) {padding: 15px 30px 20px;
}/style
4、vue 页面中使用
!-- 拖拽上传 --
DragUpload v-ifdragUpload.visible:datadragUploaddragUploadAxiosFndragUploadAxiosFn
/
const dragUpload: any reactive({visible: false,fileSize: 100, // 单位字节 MBimgType: [png, jpg, jpeg], // 图片类型限制fileName: SPU, // 超出后列表展示的文件名
}); 5、上传到后端接口的参数 6、效果图如下 7、额外补充后端接收文件流的方法
