建立企业网站步骤,宝塔wordpress ip访问,加强网站人才建设,住房和城乡建设局网站1.前端技术#xff1a;V3 Ant Design Vue
2.后端技术#xff1a;Java
图片上传/回显#xff1a; 文件上传回显#xff1a; 表结构#xff1a;单文件/图片上传为A表对文件C表 #xff08;A表field字段 对应 C表id字段#xff09;
如图#xff1a;A表中的 vehicle_d…1.前端技术V3 Ant Design Vue
2.后端技术Java
图片上传/回显 文件上传回显 表结构单文件/图片上传为A表对文件C表 A表field字段 对应 C表id字段
如图A表中的 vehicle_driving_license 和 driver_license 存的是C表中的id字段
表结构多文件/图片上传为A表对文件B表 中的Biz字段B表中的file_id字段对应C表中的id字段B表的 Biz 字段和 file_id 字段是一对多的存在关系
如图A表中的 house_type_file_id 和 house_type_balcony_close_file_id 、house_type_balcony_bisect_file_id、house_type_shearwall_file_id 存的是B表中的Biz_id字段,B表中的 field_id 字段对应 C表中的 id 字段B表中的Biz_id字段 与 field_id 字段是一对多的关系 上传上传功能不分单个多个java后台代码controller OperationLogApiOperation(上传文件)PostMapping(/upload)public ApiResultFileInfo upload(RequestParam MultipartFile file, HttpServletRequest request) {FileInfo result null;try {String dir getUploadDir();File upload FileServerUtil.upload(file, dir, config.getUploadUuidName());String path upload.getAbsolutePath().replace(\\, /).substring(dir.length() - 1);String requestURL StrUtil.removeSuffix(request.getRequestURL(), /upload);requestURL /api/file-info/file/;String requestURL2 /api/file-info;/*if(requestURL.contains(10.1.140.88)){requestURL https://10.1.140.88/api/file;}if(requestURL.contains(djshemei.com)){requestURL https://10.1.140.88/api/file;}*/String originalName file.getOriginalFilename();result new FileInfo();result.setId(SnowFlakeGenerator.nextId());String contentType FileServerUtil.getContentType(upload);result.setFileType(contentType);result.setFileName(StrUtil.isBlank(originalName) ? upload.getName() : originalName);result.setFilePath(path);result.setUrlPath(requestURLresult.getId());result.setUrl(requestURL2 / path);//这个用户应该是这个找登录用户User loginUser getLoginUser();result.setCreUserId(Long.valueOf(loginUser.getUserId()));result.setCreUserName(loginUser.getUsername());result.setCreateTime(LocalDateTime.now());fileInfoService.save(result);return success(result);} catch (Exception e) {e.printStackTrace();return fail(上传失败, result).setError(e.toString());}}
前端api代码
/*** 上传文件*/
export async function uploadFile(file, opt) {const formData new FormData();formData.append(file, file);const res await request.post(/community/file-info/upload, formData, opt);if (res.data.code 0 res.data.data) {return res.data.data;}return Promise.reject(new Error(res.data.message));
}
在页面引入使用 a-rowa-col :span12a-form-item label行驶证ele-image-uploadclassimagestype:limit1v-model:valueform1.vehicleDrivingLicenseFielduploadonUpload1removeonRemove1//a-form-item/a-cola-col :span12a-form-item label驾驶证ele-image-uploadclassimagestype:limit1v-model:valueform1.driverLicenseFielduploadonUpload2removeonRemove2//a-form-item/a-col/a-row
使用方法 const onUpload1 ({ file }) {uploadFile(file).then((data) {console.log(data, data);form1.vehicleDrivingLicenseFieldId1 data.id;}).catch((e) {item.status exception;message.error(e.message);});};
数据结构 // 图片const form1 reactive({vehicleDrivingLicenseField: [],vehicleDrivingLicenseFieldId1: ,driverLicenseField: [],driverLicenseFieldId2: });
图片回显java代码 controller ApiOperation(查询文件)GetMapping(/queryFile/{id})public ApiResult? getFileInfoByRoomCar (PathVariable(id) Long id, HttpServletRequest request ) {ListRoomCar roomCarServiceList roomCarService.list(new QueryWrapperRoomCar().eq(car_id, id));if(roomCarServiceList.size() 0){return success(new ArrayList());}else{ListFileInfo fileIdList fileInfoService.list(new QueryWrapperFileInfo().in(id, roomCarServiceList.stream().map(RoomCar::getVehicleDrivingLicense).collect(Collectors.toList())));if (fileIdList.size() 0) {String requestURL StrUtil.removeSuffix(request.getRequestURL(), /room-car/queryFile/id);for (FileInfo record : fileIdList) {if (StrUtil.isNotBlank(record.getFilePath())) {record.setDownloadUrl(requestURL /file-info/ record.getFilePath());record.setUrl(requestURL /file-info/ record.getFilePath());}}}ListFileInfo fileIdList1 fileInfoService.list(new QueryWrapperFileInfo().in(id, roomCarServiceList.stream().map(RoomCar::getDriverLicense).collect(Collectors.toList())));if (fileIdList1.size() 0) {String requestURL StrUtil.removeSuffix(request.getRequestURL(), /room-car/queryFile/id);for (FileInfo record : fileIdList1) {if (StrUtil.isNotBlank(record.getFilePath())) {record.setDownloadUrl(requestURL /file-info/ record.getFilePath());record.setUrl(requestURL /file-info/ record.getFilePath());}}}HashMapString, ListFileInfo data new HashMap();data.put(vehicleDrivingLicenseField, fileIdList);data.put(driverLicenseField, fileIdList1);return success(data);}}
前端api: export async function queryItem(id) {const res await request.get(/community/decoration-manage/queryFile/ id);if (res.data.code 0) {return res.data;}return Promise.reject(new Error(res.data.message));
}
页面引入使用 watch(() props.visible,(visible) {if (visible) {if (props.data) {assignObject(form, {...props.data});isUpdate.value true;showFile.value true;changeRoomType(props.data.roomTypeId);// driverLicense// vehicleDrivingLicensequeryItem(props.data.carId).then((res) {form1.vehicleDrivingLicenseField res.data.vehicleDrivingLicenseField;form1.driverLicenseField res.data.driverLicenseField;}).catch((e) {message.error(e.message);});loadingData();} else {showFile.value false;isUpdate.value false;loadingData();}} else {form1.vehicleDrivingLicenseField [];form1.driverLicenseField [];resetFields();}}); 多文件上传跟单文件上传一样的不一样的是显示的方式 多文件回显后端 Java代码controller ApiOperation(查询文件)GetMapping(/queryFile/{id})public ApiResult? getFileInfoByRegionalHouseTypeId(PathVariable(id) Long id, HttpServletRequest request ) {BaseRegionalHouseType mainRec baseRegionalHouseTypeService.getByIdRel(id);ListFileInfo house_type_file new ArrayList();ListFileInfo house_type_balcony_close_file new ArrayList();ListFileInfo house_type_balcony_bisect_file new ArrayList();ListFileInfo house_type_shearwall_file new ArrayList();Long bizId;bizId mainRec.getHouseTypeFileId();if (bizId ! null) {house_type_file fileInfoService.getfileinfobybiz(bizId);String requestURL StrUtil.removeSuffix(request.getRequestURL(), /base-regional-house-type/queryFile/id);for (FileInfo record : house_type_file) {if (StrUtil.isNotBlank(record.getFilePath())) {record.setDownloadUrl(requestURL /file-info/download/ record.getFilePath());}}}bizId mainRec.getHouseTypeBalconyCloseFileId();if (bizId ! null) {house_type_balcony_close_file fileInfoService.getfileinfobybiz(bizId);String requestURL StrUtil.removeSuffix(request.getRequestURL(), /base-regional-house-type/queryFile/id);for (FileInfo record : house_type_balcony_close_file) {if (StrUtil.isNotBlank(record.getFilePath())) {record.setDownloadUrl(requestURL /file-info/download/ record.getFilePath());}}}bizId mainRec.getHouseTypeBalconyBisectFileId();if (bizId ! null) {house_type_balcony_bisect_file fileInfoService.getfileinfobybiz(bizId);String requestURL StrUtil.removeSuffix(request.getRequestURL(), /base-regional-house-type/queryFile/id);for (FileInfo record : house_type_balcony_bisect_file) {if (StrUtil.isNotBlank(record.getFilePath())) {record.setDownloadUrl(requestURL /file-info/download/ record.getFilePath());}}}bizId mainRec.getHouseTypeShearwallFileId();if (bizId ! null) {house_type_shearwall_file fileInfoService.getfileinfobybiz(bizId);String requestURL StrUtil.removeSuffix(request.getRequestURL(), /base-regional-house-type/queryFile/id);for (FileInfo record : house_type_shearwall_file) {if (StrUtil.isNotBlank(record.getFilePath())) {record.setDownloadUrl(requestURL /file-info/download/ record.getFilePath());}}}HashMapString, ListFileInfo data new HashMap();data.put(house_type_file, house_type_file);data.put(house_type_balcony_close_file, house_type_balcony_close_file);data.put(house_type_balcony_bisect_file, house_type_balcony_bisect_file);data.put(house_type_shearwall_file, house_type_shearwall_file);return success(data);}
前端api:
export async function queryHouse(id) {const res await request.get(/community/base-regional-house-type/queryFile/ id);if (res.data.code 0) {return res.data;}return Promise.reject(new Error(res.data.message));
}
页面使用
templateele-modal:width1200:visiblevisible:confirm-loadingloadingtitle文件管理:body-style{ paddingBottom: 8px }update:visibleupdateVisibleoksavediv classele-bodya-card :borderedfalsediv classcontentdiv classloudongdivdivstylefont-size: 18px; font-weight: 600; margin-bottom: 25px文件上传/diva-row typeflex stylemargin: 20px -15pxa-col :span24a-buttontypetextclicktypeclick(0):classbtn 0 ? btnColor : stylewidth: 150px户型图/a-button/a-col/a-rowa-row typeflex stylemargin: 20px -15pxa-col :span24a-buttontypetextclicktypeclick(1):classbtn 1 ? btnColor : stylewidth: 150px封闭阳台方案/a-button/a-col/a-rowa-row typeflex stylemargin: 20px -15pxa-col :span24a-buttontypetextclicktypeclick(2):classbtn 2 ? btnColor : stylewidth: 150px封闭阳台剖面图/a-button/a-col/a-rowa-row typeflex stylemargin: 20px -15pxa-col :span24a-buttontypetextclicktypeclick(3):classbtn 3 ? btnColor : stylewidth: 150px剪力墙标识图/a-button/a-col/a-row/div/divdiv classcontent-rightdiv classele-body stylemargin-top: -40pxdiv classcontentdiv classcontent-rightdiv classcontent-right-header stylemargin-top: 30pxa-upload:show-upload-listfalse:customRequestonUploadCardfa-button typeprimary classele-btn-icontemplate #iconupload-outlined //templatespan上传/span/a-button/a-upload/div!-- 表格 --ele-pro-tableborderedreftableRefrow-keyid:columnscolumns:datasourcedatasource:toolkitfalse:scroll{ x: 800 }template #bodyCell{ column, record, index }template v-ifcolumn.key actiona-spacea:hrefrecord.downloadUrltarget_blank:disabledrecord.downloadUrl ! null ? disabled : true下载/aa-divider typevertical /a-popconfirmplacementtopRighttitle确定要删除此文件吗confirmremove(record, index)a classele-text-danger删除/a/a-popconfirm/a-space/template/template/ele-pro-table/div/div/div/div/div/a-card!-- spbuilding-editv-model:visibleshowEdit:datacurrentdonereload/bar-code :databarcodedata v-model:visibleshowBarcode / --/div/ele-modal
/template
script setupimport { ref, watch, onMounted } from vue;import {getfileinfobybiz,uploadFile,removeFile} from /api/system/file-info;import useFormData from /utils/use-form-data;import { Form, message } from ant-design-vue/es;import { messageLoading } from ele-admin-pro/es;import {saveHouse,queryHouse} from /api/baseRegionalPark/base-regional-house-type;import { CloudUploadOutlined, FileTextOutlined } from ant-design/icons-vue;// import FileUpload from ./file-upload.vue;const emit defineEmits([done, update:visible]);const useForm Form.useForm;const props defineProps({data: Object,visible: Boolean});// 表单const { form, resetFields, assignFields } useFormData({regionalHouseTypeId: ,// 户型图idhouseTypeFileId: ,// 封闭阳台方案idhouseTypeBalconyCloseFileId: ,// 封闭阳台剖面图idhouseTypeBalconyBisectFileId: ,// 剪力墙标识图idhouseTypeShearwallFileId: ,house_type_file: [],house_type_balcony_close_file: [],house_type_balcony_bisect_file: [],house_type_shearwall_file: []});// 按钮颜色const btn ref(0);// 确定数据const datas ref({regionalHouseTypeId: ,house_type_file: [],house_type_balcony_close_file: [],house_type_balcony_bisect_file: [],house_type_shearwall_file: [],downloadUrl:,// 户型图idhouseTypeFileId: ,// 封闭阳台方案idhouseTypeBalconyCloseFileId: ,// 封闭阳台剖面图idhouseTypeBalconyBisectFileId: ,// 剪力墙标识图idhouseTypeShearwallFileId: ,});const typeclick (type) {switch (type) {case 0:btn.value 0;datasource.value datas.value.house_type_file; break;case 1:btn.value 1;datasource.value datas.value.house_type_balcony_close_file; break;case 2:btn.value 2;datasource.value datas.value.house_type_balcony_bisect_file; break;case 3:btn.value 3;datasource.value datas.value.house_type_shearwall_file; break;} };const findPicIds ref([]);// 表格实例const tableRef ref(null);// 导入请求状态const loading ref(false);const isAdmin ref(false);// 保存按钮const save () {saveHouse(datas.value).then((res) {if (res.code 0) {message.success(保存成功);emit(done);emit(update:visible, false);} else {message.error(res.msg);}});};// 表格列配置const columns ref([{title: 序号,key: index,width: 48,align: center,fixed: left,hideInSetting: true,customRender: ({ index }) index (tableRef.value?.tableIndex ?? 0)},{title: 文件名,dataIndex: fileName},{title: 文件类型,dataIndex: fileType},{title: 创建人,dataIndex: creUserName},{title: 创建时间,dataIndex: createTime},{title: 操作,key: action,width: 160,align: center,hideInSetting: true}]);//上传文件const onUploadCardf (d) {uploadFile(d.file, {onUploadProgress: (e) {if (e.lengthComputable) {d.progress (e.loaded / e.total) * 100;}}}).then((data) {d.status done;if (btn.value 0) { datas.value.house_type_file.push(data);} else if (btn.value 1) {datas.value.house_type_balcony_close_file.push(data);} else if (btn.value 2) {datas.value.house_type_balcony_bisect_file.push(data);} else if (btn.value 3) {datas.value.house_type_shearwall_file.push(data);}message.success(上传成功);}).catch((e) {message.error(e.message);});};// /* 删除单个 */const remove (row, index) {const hide message.loading(请求中.., 0);removeFile(row.id).then((msg) {var arr [];if(btn.value 0 ){arr datas.value.house_type_file.filter((d) d.id ! row.id);datas.value.house_type_file arr;}if(btn.value 1 ){arr datas.value.house_type_balcony_close_file.filter((d) d.id ! row.id);datas.value.house_type_balcony_close_file arr;}if(btn.value 2 ){arr datas.value.house_type_balcony_bisect_file.filter((d) d.id ! row.id);datas.value.house_type_balcony_bisect_file arr;}if(btn.value 3 ){arr datas.value.house_type_shearwall_file.filter((d) d.id ! row.id);datas.value.house_type_shearwall_file arr;}typeclick(btn.value);hide();message.success(msg);}).catch((e) {hide();message.error(e.message);});};// // 表格数据源const datasource ref([]);/* 更新visible */const updateVisible (value) {emit(update:visible, value);};watch(() props.visible,(visible) {if (visible) {if (!props.data) {alert(数据为空请确保传递正确数据);return;}console.log(props.data);datas.value.regionalHouseTypeId props.data.regionalHouseTypeId; queryHouse(datas.value.regionalHouseTypeId).then((res) {datas.value.house_type_file res.data.house_type_file;datas.value.house_type_balcony_close_file res.data.house_type_balcony_close_file;datas.value.house_type_balcony_bisect_file res.data.house_type_balcony_bisect_file;datas.value.house_type_shearwall_file res.data.house_type_shearwall_file;// 默认选中第一个typeclick(0);}); }});
/script
style langless scoped// .ele-body {// height: 100%;// }.btnColor {background-color: #f4fbf8;color: #1677ff;}.content {display: flex;.loudong {width: 280px;margin-right: 15px;padding: 15px;// height: 80vh;background: #fff;overflow: auto;box-sizing: border-box;}.search {width: 100%;padding: 20px 10px 0px 20px;background: #f6f5f5;margin-bottom: 5px;}.content-right {flex: 1;}}
/style还有一个小细节java存储文件id的字段一定不要忽略修改的时候传来的null 用注解
TableField(updateStrategy FieldStrategy.IGNORED)
就ok啦暂时先做个笔记后面有空再慢慢写注解
