一.简单介绍 | KWAN的解忧杂货铺

# 一.简单介绍

# 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("上传图片成功");
}

1
2
3
4
5
6

# 2.service

public interface PicInfoService extends IService<PicInfo> {
    /**
     * 上传图片
     *
     * @param file
     */
    void handleFileUpload(MultipartFile[] file);
}

1
2
3
4
5
6
7
8

首先遍历 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 三.前端

# 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="https://qinyingjie.top: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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 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,
  }
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# 3.提交方法

在方法模块定义如下提交方法

async submitUpload() { this.$refs.upload.submit() this.addPicVisible = false },

← 01-反编译工具 03-PlantUML →