前端上传的文件,后端将如何进行存储以及回显
目录
前端上传的文件，后端将如何进行存储以及回显
文件上传
完成文件上传这个功能需要涉及到两个部分：
- 前端程序
- 服务器程序
储存方式
文件上传后将如何进行储存
- 本地磁盘储存
- 云服务器oss储存
项目准备
##后端项目创建
- 创建springboot工程，引入对应的起步依赖（web、mybatis、mysql驱动、lombok）
- 配置文件application.properties中引入mybatis的配置信息，准备对应的实体类
- 准备对应的Mapper、Service(接口、实现类)、Controller基础结构
##前端代码准备
便于测试，我们将前端程序直接放在springboot项目工程下的static（静态资 源）目录里面的"upload.html"文件中。
<form action="/upload" method="post" enctype="multipart/form-data">
姓名: <input type="text" name="username"><br>
年龄: <input type="text" name="age"><br>
头像: <input type="file" name="image"><br>
<input type="submit" value="提交">
</form>上传文件的原始form表单，要求表单必须具备以下三点（上传文件页面三要素）：
表单必须有file域，用于选择要上传的文件
<input type="file" name="image"/>表单提交方式必须为POST
通常上传的文件会比较大，所以需要使用 POST 提交方式
表单的编码类型enctype必须要设置为：multipart/form-data
普通默认的编码格式是不适合传输大型的二进制数据的，所以在文件上传时，表单的编码格式必须设置为multipart/form-data
本地磁盘储存代码实现
- 首先在服务端定义一个controller类，用来进行文件上传，然后在controller当中定义一个方法来处理/upload 请求
- 在定义的方法中接收提交过来的数据 （方法中的形参名和请求参数的名字保持一致）
- 用户名：String name
- 年龄： Integer age
- 文件： MultipartFile image（Spring中提供了一个API：MultipartFile，使用这个API就可以来接收到上传的文件）
@RestController
public class UploadController {
@PostMapping("/upload")
public Result upload(MultipartFile image) throws IOException {
//获取原始文件名
String originalFilename = image.getOriginalFilename();
//构建新的文件名
String eatnmae = originalFilename.substring(originalFilename.lastIndexOf("."));
//引入UUID，防止文件名相同覆盖
String newFileName = UUID.randomUUID().toString() + eatnmae;
//将文件储存在服务器的磁盘目录中
image.transferTo(new File("D:/" +newFileName));
return Result.success();注意：如果表单项的名字和方法中形参名一致
云服务器储存代码实现（以阿里云为例）
文件储存我们使用的是阿里云的OSS对象存储服务。
前端发送文件上传请求——>服务器接收请求并将接收到的上传文件——>
上传到 oss ，由 oss 帮我们存储和管理。如何在项目当中来使用云服务完成具体的业务功能
SDK：Software Development Kit 的缩写，软件开发工具包，包括辅助软件开发的依赖（jar 包）、代码示例等，都可以叫做 SDK。
简单说，sdk 中包含了我们使用第三方云服务时所需要的依赖，以及一些示例代码。我们可以参照 sdk 所提供的示例代码就可以完成入门程序。
阿里云 oss 对象存储服务具体的使用步骤。
- 注册阿里云账户（注册完成后需要实名认证）
- 注册完账号之后，就可以登录阿里云
- 通过控制台找到对象存储 OSS 服务（如果是第一次访问，还需要开通对象存储服务 OSS）
- 开通 OSS 服务之后，就可以进入到阿里云对象存储的控制台
- 点击左侧的 “Bucket 列表”，创建一个 Bucket
- 参照官方所提供的 SDK 示例来编写入门程序。
- 找到阿里云 OSS 提供的 SDK 示例代码
- 引入依赖放入项目中的 pom.xml 依赖配置文件中
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.15.1</version>
</dependency>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.3.1</version>
</dependency>
<dependency>
<groupId>javax.activation</groupId>
<artifactId>activation</artifactId>
<version>1.1.1</version>
</dependency>
<!--no more than 2.3.3-->
<dependency>
<groupId>org.glassfish.jaxb</groupId>
<artifactId>jaxb-runtime</artifactId>
<version>2.3.3</version>
</dependency>- 在项目中新建一个工具 Utils 类，根据示例代码进行改写
@Component
public class AliOSSUtils {
private String endpoint = "https://oss-cn-shanghai.aliyuncs.com";
private String accessKeyId = "LTAI5t9MZK8iq5T2Av5GLDxX";
private String accessKeySecret = "C0IrHzKZGKqU8S7YQcevcotD3Zd5Tc";
private String bucketName = "web-framework01";
/**
* 实现上传图片到OSS
*/
public String upload(MultipartFile multipartFile) throws IOException {
// 获取上传的文件的输入流
InputStream inputStream = multipartFile.getInputStream();
// 避免文件覆盖
String originalFilename = multipartFile.getOriginalFilename();
String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
//上传文件到 OSS
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, fileName, inputStream);
//文件访问路径
String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
// 关闭ossClient
ossClient.shutdown();
return url;// 把上传到oss的路径返回
}- Controller 层代码实现
@RestController
public class UploadController {
@Autowired
private AliOSSUtils aliOSSUtils;
@PostMapping("/upload")
public Result upload(MultipartFile image) throws IOException {
//调用阿里云 OSS 工具类，将上传上来的文件存入阿里云
String url = aliOSSUtils.upload(image);
//将图片上传完成后的 url 返回，用于浏览器回显展示
return Result.success(url);
}
}