一、本地上传
概念:将前端上传的文件保存到自己的电脑
作用:前端上传的文件到后端,后端存储的是一个临时文件,方法执行完毕会消失,把临时文件存储到本地硬盘中。
1、导入文件上传的依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
2、写一个上传文件的接口(注意:文件保存到本地需要写自己的本地路径)
@RestController
public class UploadController {
@PostMapping("/content/link/upload")
public ResponseResult upload(MultipartFile file, HttpServletRequest request) throws IOException {
//本地上传的目的:将前端上传的文件转存到本地中,是因为前端上传的文件,后端存的是临时文件,方法运行完毕文件也会消失
//获取上传文件的名字
String filename=file.getOriginalFilename();
//获取文件的扩展名
String[] strings = filename.split("\\.");
String kzName = strings[strings.length - 1];
//随机的文件名
UUID uuid = UUID.randomUUID();
//把随机文件名和扩展名拼接
String name=uuid+kzName;
//本地文件名称如果不是XXX.jpg的话,需要改成String name=uuid+"."+kzName;
//把临时文件存储到本地硬盘中
file.transferTo(new File("自己的本地路径",name));
return ResponseResult.okResult();
}
}
3、前端作相应修改,保持请求一致(协议和端口不能丢)
4、启动项目即可实现,此时本地路径中就会出现上传的文件。
本地上传实现不了回显,需要用到阿里云的对象存储。
5、如果文件太大,需要在application.yml中设置上传的文件大小
servlet: multipart: #指定单个文件上传的大小 max-file-size: 2MB #指定单次上传文件的大小 max-request-size: 5MB
二、阿里云OSS
2.1 通过本地存储上传阿里云OSS
1、注册阿里云(实名认证)
2、开通对象存储OSS
2.1点击工作台,点击开始免费试用
2.2找到对象存储,点击立即试用
2.3创建Bucket桶
服务器位置可以任意选择,不过要跟后端endpoint对应上
2.4Bucket创建完成
3、参照官方SDK入门
3.1找到SDK的说明
3.2找到文件上传参考部分
3.2导入OSS依赖 (JDK9以下可直接复制该依赖)
<dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.17.4</version> </dependency>
如果使用的是Java 9及以上的版本,则需要添加JAXB相关依赖。添加JAXB相关依赖示例代码如下:
<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>
3.3复制3.1部分上传文件流的代码,点击复制,到后端相应的包 粘贴 然后会自动粘贴,并生成一个名为Demo的类
4、获取AccessKey
没有的话创建AccessKey,即可生成accessKeyId和accessKeySecret。
5、运行Demo,并刷新阿里云,文件上传成功
点击详情,复制文件的URL路径到前端,文件回显成功
2.2 文件直接上传阿里云OSS
1、封装一个AliOSSUtils类
@Component
public class AliOSSUtils {
private String endpoint="https://oss-cn-hangzhou.aliyuncs.com";
private String accessKeyId="LTAI5t6HZqg2bNixh5Hr5uqz";
private String accessKeySecret="82qRssIfmQo05j0haZPleiitkQ6LID";
private String bucketName="blog27";
/*
* 实现上传图片到OSS
*/
public String upload(MultipartFile multipartFile) throws IOException {
//获取上传的文件的输入流
InputStream inputStream=multipartFile.getInputStream();
//避免文件覆盖
String fileName= LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd-HH-mm-ss"))+multipartFile.getOriginalFilename();
//上传文件到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;
}
}
2、编写一个上传文件的接口
3、前端作相应的修改(上传文件必须为POST请求,此处路径必须为接口全路径)
额外小知识:想让上传的图片URL地址直接返回到前端的文本框中,并回显成功,图中红框部分为文本框,用来回显图片的URL地址
1、在新增或修改的时候自动获取到阿里云图片的URL地址,后端添加接口
2、修改前端,添加一个上传成功的回调函数
上传成功后,将返回的URL设置到文本框中