文件下载

controller/FileController

/**
 * 文件下载接口
 * 下载路径：“http://localhost:9999/files/download/404.png”
 */
@GetMapping("/download/{fileName}")
public void download(@PathVariable String fileName, HttpServletResponse response) throws Exception {
    //找到文件的位置
    String filePath = System.getProperty("user.dir") + "/files/";  //获取到当前项目的根路径
    String realPath = filePath + fileName;  //最终路径
    boolean exist = FileUtil.exist(realPath);
    if (!exist) {
        throw new CustomerException("文件不存在");
    }
    // 读取文件的字节流
    byte[] bytes = FileUtil.readBytes(realPath);
    ServletOutputStream os = response.getOutputStream();
    // 输出流对象把文件写出到客户端
    os.write(bytes);
    os.flush();
    os.close();
}

接口放行，不鉴权

文件上传

/**
 * 文件上传接口
 */
@PostMapping("/upload")
public Result upload(@RequestParam("file") MultipartFile file) throws Exception {
    //找到文件的位置
    String filePath = System.getProperty("user.dir") + "/files/";  //获取到当前项目的根路径
    if (!FileUtil.isDirectory(filePath)) {
        FileUtil.mkdir(filePath);
    }
    byte[] bytes = file.getBytes();
    String fileName = System.currentTimeMillis() + "_" + file.getOriginalFilename();  //文件的原始名称
    // 写入文件
    FileUtil.writeBytes(bytes, filePath + fileName);
    String url = "http://localhost:9999/files/download/" + fileName;
    return Result.success(url);
}

使用 apipost 测试文件上传

在数据库表 admin 和 user 里面加上 avatar 字段

CREATE TABLE `admin` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `username` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '账号',
  `password` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
  `name` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',
  `phone` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '手机号',
  `email` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮箱',
  `role` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',
  `avatar` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
  PRIMARY KEY (`id`),
  UNIQUE KEY `username_index` (`username`) USING BTREE COMMENT '账号'
) ENGINE=MyISAM AUTO_INCREMENT=43 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='管理员信息';

在实体类里添加 avatar 私有成员变量和相应的get、set方法

注意在 Mapper.xml 里面加上 avatar 的sql

前端对接文件上传和下载

文件上传到数据库是存储的一串 URL 链接的字符串

表单上传

<el-form-item prop="avatar" label="头像" >
  <el-upload
      action="http://localhost:9999/files/upload"
      :headers="{ token: data.user.token }"
      :on-success="handleFileSuccess"
      list-type="picture"
  >
    <el-button type="primary">上传头像</el-button>
  </el-upload>
</el-form-item>

const handleFileSuccess = (res) => {
  data.form.avatar = res.data
}

表格显示图片

<el-table-column label="头像" >
  <template #default="scope">
    <el-image v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" :preview-teleported="true"
              style="width: 40px; height: 40px; border-radius: 50%; display: block"/>
  </template>
</el-table-column>

图片预览效果不理想，加上属性 :preview-teleported=”true