前端上传的文件，后端将如何进行存储以及回显

文件上传

完成文件上传这个功能需要涉及到两个部分：

1. 前端程序
2. 服务器程序

储存方式

文件上传后将如何进行储存

1. 本地磁盘储存
2. 云服务器oss储存

项目准备

##后端项目创建

1. 创建springboot工程，引入对应的起步依赖（web、mybatis、mysql驱动、lombok）
2. 配置文件application.properties中引入mybatis的配置信息，准备对应的实体类
3. 准备对应的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帮我们存储和管理。

1. 如何在项目当中来使用云服务完成具体的业务功能

   SDK：Software Development Kit 的缩写，软件开发工具包，包括辅助软件开发的依赖（jar包）、代码示例等，都可以叫做SDK。

   简单说，sdk中包含了我们使用第三方云服务时所需要的依赖，以及一些示例代码。我们可以参照sdk所提供的示例代码就可以完成入门程序。

2. 阿里云oss对象存储服务具体的使用步骤。

• 注册阿里云账户（注册完成后需要实名认证）
• 注册完账号之后，就可以登录阿里云

• 通过控制台找到对象存储OSS服务（如果是第一次访问，还需要开通对象存储服务OSS）

• 开通OSS服务之后，就可以进入到阿里云对象存储的控制台

• 点击左侧的 “Bucket列表”，创建一个Bucket

3. 参照官方所提供的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);

    }
}