前后端分离系统中的文件上传

第一步：

在personalIndexView页面中找到文件上传组件, 设置action/name和limit属性

<!--      action设置上传地址
          name设置参数名
          limit设置上传文件数量-->
      <el-upload
          action="http://localhost:8080/v1/upload"
          name="file"
          :limit="1"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>

第二步：

创建UploadController处理上面action设置的请求地址, 在方法中将接收到的文件保存到指定的路径,最后把图片路径响应给客户端

@PostMapping("upload")
public JsonResult upload(MultipartFile file) throws IOException {
    String fileName = file.getOriginalFilename();
    //截取后缀名   a.jpg    .jpg
    String suffix = fileName.substring(fileName.lastIndexOf('.'));
    //得到唯一文件名  UUID.randomUUID()得到一个唯一标识（）16进制
    fileName = UUID.randomUUID()+suffix;
    System.out.println("filename="+fileName);
    //准备磁盘路径
    String dirPath = "d:/files";
    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
    String datePath = sdf.format(new Date());
    // d:/files/2023/09/13/
    File dirFile = new File(dirPath+datePath);
    if(!dirFile.exists()){
        dirFile.mkdirs();//如果不存在就创建
    }
    //d:/files/2023/09/13/xxxx.jpg
    String filePath = dirPath+datePath+fileName;
    //把接收到的文件保存到指定的路径  异常抛出
    file.transferTo(new File(filePath));
    return JsonResult.ok(datePath+fileName);
}

文件是保存在磁盘中的，但是如果文件数量很多，到后面会影响文件的检索效率，所以可以按照数量来对文件的保存方法进行分类，可以按月分也可以按天来分，这样当文件数量很多时检索效率也不会降低

第三步：

在application.properties里面添加上传文件大小的限制

不写配置的话，idea默认前端传来的文件大小为1MB

需要在配置类上写上

# 设置单个文件上传的大小限制
spring.servlet.multipart.max-file-size=100MB
# 设置多个文件的总大小
spring.servlet.multipart.max-request-size=500MB

第四步：

在personalIndexView中的上传组件里面添加:on-success事件,当上传成功时调用对应的方法, 在方法里面把图片路径赋值给this.user.imgUrl属性 这样当点击保存的时候 就会把修改的图片路径传递给服务器, 服务器端就会把图片路径保存到数据库里面

<el-upload
    action="http://localhost:8080/v1/upload"
    name="file"
    :limit="1"
    list-type="picture-card"
    :on-success="handleSuccess"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>

handleSuccess(response,file,fileList){//上传成功后调用的方法
  //response代表服务器响应的内容（JsonResult,response.data才是图片路径）
  //file代表上传成功的文件多少，filelist代表上传成功的多个对象（选择多个文件时）
  //response代表JsonResult对象  response.data得到是服务器响应时的图片路径
  this.user.imgUrl=response.data;
}

这个response是element-ui框架定义的对象，而异步请求的response 是axios框架定义的，两者是不相同的，只是恰巧名字一样

第五步：

在controller层中写响应的代码，代码在第二步中可看

服务器保存的图片,如果需要让客户端访问的话需要将保存图片的路径设置为静态资源文件夹

#客户端只能访问静态资源文件夹下的文件，设置静态资源文件夹
spring.web.resources.static-locations=file:d:/files,classpath:static

第六步：

前端工程访问图片时: 从数据库中得到的路径是 /开头的绝对路径 /2023/09/13/335d29ca-c9fb-4a56-9e48-609f96e445cb.jpg 如果前端得到图片后直接使用 ,/代表的是前端工程的根路径http://localhost:9090, 此时需要手动拼接成后端的路径

<el-avatar :src="'http://localhost:8080'+user.imgUrl"></el-avatar>

数据库只保存数据和路径

文件和图片都是保存在磁盘中

数据库通常用于持久化存储和管理数据，但是它不仅仅保存数据和路径，还提供了一种结构化和有效的方式来组织、访问和操作数据。

除了数据本身，数据库还保存了数据的模式（Schema），包括表、列、索引等定义。它定义了如何存储和组织数据，以及数据之间的关系。

数据库还提供了一套查询语言（如 SQL）和编程接口（如 JDBC、ODBC）来查询和操作数据。通过这些接口和语言，可以执行插入、更新、删除或查询数据的操作。

另外，数据库还提供了事务管理机制，用于确保数据的一致性和完整性。事务允许在一个逻辑单元中执行多个操作，并保证要么全部执行成功，要么全部回滚到原始状态。

此外，数据库还可以实现数据的备份和恢复，以及数据的安全性（如访问控制和加密）和性能优化（如索引、分区等）等功能。

总而言之，数据库不仅仅是保存数据和路径，它提供了许多功能和工具，用于方便地管理和操作数据，并确保数据的安全性、一致性和可靠性。