element-ui上传图片

Question

我现在在做一个springboot +vue2 的项目，无法完成头像上传和excel导入导出功能，

Answer 1

该回答引用ChatGPT

对于头像上传，Element UI提供了el-upload组件，可以轻松地实现文件上传功能。具体实现步骤如下：

1.在Vue组件中引入el-upload组件。

<template>
  <el-upload
    class="avatar-uploader"
    :action="uploadUrl"
    :show-file-list="false"
    :on-success="handleUploadSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      uploadUrl: '/upload/avatar'
    }
  },
  methods: {
    handleUploadSuccess(response) {
      this.imageUrl = response.data.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('只能上传jpg/png格式的图片')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过2MB')
        return false
      }
      return true
    }
  }
}
</script>

2.在后端中添加接收文件的API。在Spring Boot中可以使用Spring MVC的MultipartFile类型来处理文件上传。

@PostMapping("/upload/avatar")
@ResponseBody
public JsonResult uploadAvatar(@RequestParam("file") MultipartFile file) {
    // 处理上传的文件
    String url = fileService.upload(file);
    // 返回图片的url
    return JsonResult.success().put("url", url);
}

对于Excel导入导出功能，可以使用Apache POI来实现。具体实现步骤如下：

1.添加依赖

<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>5.1.0</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>5.1.0</version>
</dependency>

2.实现导出Excel功能

@GetMapping("/export")
public void export(HttpServletResponse response) throws IOException {
    // 创建工作簿
    XSSFWorkbook workbook = new XSSFWorkbook();
    // 创建工作表
    XSSFSheet sheet = workbook.createSheet("Sheet1");
    // 创建行和单元格
    for (int rowNum = 0; rowNum < 10; rowNum++) {
        XSSFRow row = sheet.createRow(rowNum);
        for (int cellNum = 0; cellNum < 10; cellNum++) {
            XSSFCell cell = row.createCell(cellNum);
            cell.setCellValue("cell-" + cellNum + "-" + rowNum);
        }
    }
    // 设置响应头
    response.setContentType("application/octet-stream");
    response.setHeader("Content-Disposition", "attachment; filename=test.xlsx");
    // 输出Excel文件
    workbook.write(response.getOutputStream());
    workbook.close();
}

3.实现导入Excel功能

@PostMapping("/import")
@ResponseBody
public JsonResult importExcel(@RequestParam("file") MultipartFile file) throws IOException {
    // 创建工作簿
    Workbook workbook = WorkbookFactory.create(file.getInputStream());
    // 获取工作表
    Sheet sheet = workbook.getSheetAt(0);
    // 遍历行和单元格
    for (Row row : sheet) {
        for (Cell cell : row) {
            System.out.print(cell.getStringCellValue() + "\t");
        }
        System.out.println();
    }
    // 关闭工作簿
    workbook.close();
    return JsonResult.success();
}

在上面的代码中，我们首先创建了一个Workbook对象，它可以代表一个Excel文件。然后我们使用文件上传的MultipartFile对象来创建工作簿，并通过getSheetAt(0)方法获取第一个工作表。接下来，我们使用for循环遍历每一行和每一个单元格，并通过getCellType()和getStringCellValue()方法获取单元格中的数据。最后，我们关闭工作簿并返回一个JsonResult对象表示导入成功