怎么黑网站的步骤,推广游戏的平台,wordpress完美商城,网站引导页怎么设置#x1f49d;#x1f49d;#x1f49d;欢迎来到我的博客#xff0c;很高兴能够在这里和您见面#xff01;希望您在这里可以感受到一份轻松愉快的氛围#xff0c;不仅可以获得有趣的内容和知识#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学… 欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂 非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。 ✨✨ 欢迎订阅本专栏 ✨✨ 博客目录 一.简单介绍1.需求背景2.使用的技术 二.后端1.controller2.service 三.前端1.vue 页面2.data3.提交方法 一.简单介绍
1.需求背景
上传文件的需求背景通常如下:
网络应用程序开发 在开发一个网络应用程序时可能需要用户上传文件比如头像、文档、照片等。需要设计一个用户友好的界面让用户能够轻松地选择并上传文件。后端服务器需要相应的接口和逻辑来处理上传的文件包括存储、验证和检查文件类型等。 数据收集和处理 在数据收集和处理的过程中上传文件是获取大量数据的一种方式比如用户提交的调查问卷、日志文件等。需要确保上传的文件格式符合预期可能需要进行数据清洗和验证。后续可能需要对上传的数据进行分析、存储或其他处理。 团队协作平台 在团队协作平台上可能需要上传文件以便分享和协作比如共享文档、图片、视频等。安全性是一个重要考虑因素需要确保上传的文件不包含恶意代码可能需要进行安全性扫描。 学习管理系统 在教育领域学习管理系统可能需要学生上传作业、报告或其他学术文件。教育机构可能需要一个系统来管理这些上传的文件确保它们与相关课程和任务相关联。 云存储服务 云存储服务允许用户上传文件并在不同设备之间共享。这可能涉及到文件同步、版本控制、访问权限管理等问题。
2.使用的技术
前端使用 vue前端 element-ui 上传组件 el-upload后端使用 SpringBoot
二.后端
1.controller
多文件上传使用 files 参数进行接收,在 service 层进行具体的业务实现。
ApiOperation(value 上传图片, nickname 上传图片)
PostMapping(/upload)
public Result handleFileUpload(RequestParam(files) MultipartFile[] files) {this.picInfoService.handleFileUpload(files);return Result.ok(上传图片成功);
}2.service
public interface PicInfoService extends IServicePicInfo {/*** 上传图片** param file*/void handleFileUpload(MultipartFile[] file);
}首先遍历 files 文件,获取去掉后缀后的文件名,创建存储目录,上传到服务器,并保存图片路径,存储下来,方便前端 vue 进行图片预览和查看详情。
Override
public void handleFileUpload(MultipartFile[] files) {for (MultipartFile file : files) {log.info(handleFileUpload() called with: file {}, file.getOriginalFilename());if (file.isEmpty()) {return;}String fileNameWithoutExtension this.getFileNameWithoutExtension(file.getOriginalFilename());PicInfo pic this.getPicByName(fileNameWithoutExtension);if (Objects.isNull(pic)) {try {String uploadDir /kwan/img/;File dir new File(uploadDir);if (!dir.exists()) {dir.mkdirs();}File serverFile new File(uploadDir file.getOriginalFilename());file.transferTo(serverFile);pic new PicInfo();pic.setPicName(fileNameWithoutExtension);pic.setPicUrl(https://www.qinyingjie.top/img/ file.getOriginalFilename());pic.setType(0);this.save(pic);} catch (IOException e) {e.printStackTrace();log.error(e.getMessage());}}}
}三.前端
1.vue 页面
主要是使用 el-upload 组件进行上传的,具体参数可以查看 element-ui 的官网 el-upload 组件的使用介绍。
el-form :inlinetrue :modelformInline classdemo-form-inlineel-form-itemel-select sizesmall v-modelpicType placeholder请选择 changequeryPicel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value/el-option/el-select/el-form-itemel-form-itemel-button sizesmall typeprimary clickprepareAddPic新增图片/el-buttonel-dialog title新增图片 :visible.syncaddPicVisible stylewidth: 100%el-upload refupload :limit30 accept.jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx namefiles multiple actionhttp://43.139.90.182:8888/picInfo/upload :on-previewhandlePreview :on-removehandleRemove :file-listfileList :auto-uploadfalse :on-successhandleUploadSuccessel-button slottrigger sizesmall typeprimary选择图片/el-buttonel-button stylemargin-left: 10px sizesmall typesuccess clicksubmitUpload上传到服务器/el-button/el-upload/el-dialog/el-form-item
/el-form2.data
data() {return {form: {picUrl: ,type: 0,},formInline: {picType: 0,},//待上传的图片fileList: [],// 用户列表数据picList: [],loading: false,elementui_page_component_key: 0,currentPage: 1,pageSize: 6,total: 0,imageDialogVisible: false,addPicVisible: false,editPicVisible: false,enlargedImageUrl: ,currentRowId: null,imageIndex: 0, // 当前展示的图片索引options: [{value: 0,label: 宝宝,},{value: 1,label: 学习,},{value: 2,label: 风景,},{value: 3,label: 美女,},{value: 4,label: 猫咪,},{value: 5,label: 素材,},{value: 6,label: 动漫,},{value: 99,label: 其他,},],picType: 0,}
},3.提交方法
在方法模块定义如下提交方法
async submitUpload() { this.$refs.upload.submit() this.addPicVisible false },觉得有用的话点个赞 呗。 ❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正 如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧
