💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
- 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老
- 导航
- 檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等
- 常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等
- 数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
- 懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作
- 数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
博客目录
- 一.简单介绍
- 1.需求背景
- 2.使用的技术
- 二.后端
- 1.controller
- 2.service
- 三.前端
- 1.vue 页面
- 2.data
- 3.提交方法
一.简单介绍
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 IService<PicInfo> {
/**
* 上传图片
*
* @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 :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-select size="small" v-model="picType" placeholder="请选择" @change="queryPic">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="prepareAddPic">新增图片</el-button>
<el-dialog title="新增图片" :visible.sync="addPicVisible" style="width: 100%">
<el-upload ref="upload" :limit="30" accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" name="files" multiple action="http://43.139.90.182:8888/picInfo/upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-success="handleUploadSuccess">
<el-button slot="trigger" size="small" type="primary">选择图片</el-button>
<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>
</el-dialog>
</el-form-item>
</el-form>
2.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 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
