什么是文件上传：将文件上传到服务器。

文件上传-本地存储

前端

<template>
<div><!-- 上传文件需要设置表单的提交方式为post，并设置enctype属性、表单项的type属性设置为file --><form action="http://localhost:8080/wedu/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>
</div>
</template><script>
export default {}
</script><style></style>

后端

因为要构造唯一的文件名，所以先来介绍一下uuid（通用唯一识别码,例如：d98b850e-7ad7-40c7-98ac-1d4f72b67124）

package org.test;import org.junit.Test;
import org.springframework.boot.test.context.SpringBootTest;import java.util.UUID;@SpringBootTest
public class ApplicationTest {@Testpublic void testUuid(){for (int i = 0;i < 1000;i++){//调用java.util.UUID类的下述方法生成随机的UUID字符串String uuid = UUID.randomUUID().toString();System.out.println(uuid);}}
}

正式编写后端： 

package com.wedu.modules.ColdChainVehicleDevice.controller;import com.wedu.common.utils.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.util.UUID;@RestController
@Slf4j
public class FileController {/*1、什么是文件上传：将文件上传到服务器* 前端提交过来的文件需要使用Spring提供的 MultipartFile类型的参数 来接收，无论是本地存储还是OSS存储文件MultipartFile的参数名必须和前端发送文件的请求参数名相同* 上传过来的文件是一个临时文件，当文件上传的请求响应完毕后，这个临时文件会被删除2、如何将服务端接收到的文件存储起来？* 本地存储：在服务端，接收到上传上来的文件后，将文件存储在本地服务器磁盘中。*/@PostMapping("/upload")public R upload(String username, Integer age, MultipartFile image) throws Exception {//输出日志到控制台log.info("文件上传：{},{},{}",username,age,image);//获取原始文件名String originalFilename = image.getOriginalFilename();//构造唯一的文件名（文件名不能重复，不然会覆盖）- uuid（通用唯一识别码,例如：d98b850e-7ad7-40c7-98ac-1d4f72b67124）int index = originalFilename.lastIndexOf(".");  //获取到原始文件名最后一个点的位置String extname = originalFilename.substring(index);  //截取文件名的后缀String newFileName = UUID.randomUUID().toString() + extname;log.info("新的文件名：{}",newFileName);//将传过来的文件存储在服务器的本地磁盘目录中（D:\Desktop\wedu）image.transferTo(new File("D:\\Desktop\\wedu\\" + newFileName));return R.ok();}
}

SpringBoot配置文件

spring:servlet:multipart:max-file-size: 100MB    #配置单个文件上传的大小限制max-request-size: 100MB   #配置单个请求最大的文件大小限制enabled: true

MultipartFile接口的常用方法：

文件上传-阿里云OSS存储

阿里云

先来介绍一下阿里云，它对外提供了各种各样的云服务，如下图：

阿里云OSS

现在开始介绍阿里云OSS：

使用第三方服务的通用思路

阿里云OSS-使用步骤

官方SDK编写入门程序参照： 

步骤：①安装->②配置访问凭证->③找到文件/对象中的上传文件中的简单上传的上传文件流部分复制代码

阿里云OSS官方文档

阿里云OSS-集成

在web项目中使用阿里云OSS的步骤：

package com.wedu.common.utils;import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.UUID;/*** 阿里云 OSS 工具类*/
public class AliOSSUtils {private String endpoint = "https://填你自己的地域节点";private String accessKeyId = "填你自己的accessKeyId";private String accessKeySecret = "填你自己的accessKeySecret";private String bucketName = "填你自己的存储桶名称";/*** 实现上传图片到OSS*/public String upload(MultipartFile file) throws IOException {// 获取上传的文件的输入流InputStream inputStream = file.getInputStream();// 避免文件覆盖String originalFilename = file.getOriginalFilename();String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));//上传文件到 OSSOSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);ossClient.putObject(bucketName, fileName, inputStream);//文件访问路径String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;// 关闭ossClientossClient.shutdown();return url;// 把上传到oss的路径返回}}

package com.wedu.modules.ColdChainVehicleDevice.controller;import com.wedu.common.utils.AliOSSUtils;
import com.wedu.common.utils.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.util.UUID;@RestController
@Slf4j
public class FileController {@Autowiredprivate AliOSSUtils aliOSSUtils;@PostMapping("/upload")public R upload(MultipartFile image) throws IOException {log.info("文件上传，文件名：{}",image.getOriginalFilename());String url = aliOSSUtils.upload(image);  //调用阿里云OSS工具类将文件上传到阿里云OSS中log.info("文件上传完成，文件访问的url：{}",url);return R.ok().put("url",url);   //将图片上传到阿里云OSS后的url返回，用于浏览器回显展示}
}

最后在postman中测试成功：