💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

• 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老
• 导航
  • 檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等
  • 常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等
  • 数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
  • 懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作
  • 数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

一.简单介绍

1.需求背景

上传文件的需求背景通常如下:

1. 网络应用程序开发：
   • 在开发一个网络应用程序时，可能需要用户上传文件，比如头像、文档、照片等。
   • 需要设计一个用户友好的界面，让用户能够轻松地选择并上传文件。
   • 后端服务器需要相应的接口和逻辑来处理上传的文件，包括存储、验证和检查文件类型等。
2. 数据收集和处理：
   • 在数据收集和处理的过程中，上传文件是获取大量数据的一种方式，比如用户提交的调查问卷、日志文件等。
   • 需要确保上传的文件格式符合预期，可能需要进行数据清洗和验证。
   • 后续可能需要对上传的数据进行分析、存储或其他处理。
3. 团队协作平台：
   • 在团队协作平台上，可能需要上传文件以便分享和协作，比如共享文档、图片、视频等。
   • 安全性是一个重要考虑因素，需要确保上传的文件不包含恶意代码，可能需要进行安全性扫描。
4. 学习管理系统：
   • 在教育领域，学习管理系统可能需要学生上传作业、报告或其他学术文件。
   • 教育机构可能需要一个系统来管理这些上传的文件，确保它们与相关课程和任务相关联。
5. 云存储服务：
   • 云存储服务允许用户上传文件并在不同设备之间共享。
   • 这可能涉及到文件同步、版本控制、访问权限管理等问题。

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 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙