阿里云存储文件上传
文件上传三要素:
提供form表单,method必须是post!
form表单的enctype必须是multipart/form-data
提供 input type=“file” 类型传输
编写前端请求
chooseFile(e) {
//从事件对象中拿到要上传的文件
let file = e.target.files[0];
//页面绑定的是change方法所以要判断是否选中了文件
if (file != null) {
//新建一个FormData
let formData = new FormData();
//把拿到的文件以key value的形式存入FromData中
formData.append("pImg", file);
//发送post请求携带请求头headers: {"content-Type": "multipart/form-data"}
axios.post(`common/upload`, formData, {headers: {"content-Type": "multipart/form-data"}}).then(response => {
this.imgUrl = response;
this.formData.pimg = response;
})
}
}
后端条件
maven的ssm项目
- web.xml中添加标签
<multipart-config/>
- 全注解开发
public class BaseWebAppInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
@Override
protected Class<?>[] getRootConfigClasses() {
return new Class[]{RootConfig.class};
}
@Override
protected Class<?>[] getServletConfigClasses() {
return new Class[]{ControllerConfig.class};
}
@Override
protected String[] getServletMappings() {
return new String[]{"/"};
}
@Override
//需要在这个类中重写本方法 其中可以设置文件上传的文件大小等
protected void customizeRegistration(ServletRegistration.Dynamic registration) {
MultipartConfigElement multipartConfigElement = new MultipartConfigElement("");
registration.setMultipartConfig(multipartConfigElement);
}
}
开通阿里云
1.开通阿里云对象存储OSS
2.创建Bucket
3.添加SDK依赖
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.11.2</version>
</dependency>
4.上传网络流
// yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
//在Bucket详情页面找
String endpoint = "yourEndpoint";
// 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
String accessKeyId = "yourAccessKeyId";
String accessKeySecret = "yourAccessKeySecret";
//Bucket名称
String exampleBucket ="afei28";
//创建工具类中的上传文件方法
public String upload(Part part) {
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId,accessKeySecret);
InputStream inputStream = null;
try {
//通过part获取文件的输入流
inputStream = part.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
//使用时间戳重命名文件
String fileName=System.nanoTime()+"."+ StringUtils.getFilenameExtension(part.getSubmittedFileName());
// 参数一:表示云存储上Bucket的名称
//参数二: 表示文件名(必须加后缀)
//参数三:文件的流
ossClient.putObject(exampleBucket, fileName, inputStream);
// 关闭OSSClient。
ossClient.shutdown();
//返回文件上传成功后的云端路径
return "https://afei28.oss-cn-beijing.aliyuncs.com/"+fileName;
}
Controller中参数接收
@PostMapping("/upload")
public AxiosResult<String> upload(@RequestPart Part pImg){
return AxiosResult.success(uploadUtils.upload(pImg));
}
可以直接用@RequestPart注解接收Part参数,属性名要和前端formdata中的key保持一致
本文详细介绍了如何在阿里云进行文件上传操作,包括前端表单设置、后端Maven SSM项目的配置、阿里云OSS服务的开通与Bucket创建、SDK依赖的添加以及Controller中使用@RequestPart接收文件。

被折叠的 条评论
为什么被折叠?



