诺依文件上传支持阿里云oss
2023-04-12
文章目录
- 描述
- 后端
- 引入依赖
- application.yml 添加访问oss需要的参数
- 编写oss工具类
- 编写controller
- 前端
- 更改调用接口![在这里插入图片描述]
• (https://s2.51cto.com/images/blog/202304/11133035_6434f07b97f2174373.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
- 去掉baseUrl
- 回调成功后url改成真实url
- main.js中挂在该组件
- 具体调用代码
- OssImageUpload具体代码
描述
后端的实现相对简单,网上一大堆参考案例。前端主要是拿ImageUpload改造一下。
后端
后端的实现相对简单,网上一大堆参考案例
引入依赖
com.aliyun.oss
aliyun-sdk-oss
3.15.2
application.yml 添加访问oss需要的参数
#操作oss需要的一些参数
aliyun:
accessKeyId: 你的accessKeyId # 阿里云的accessKeyId
secretAccessKey: 你的accessKey密码 # accessKey 密码
oss:
endPoint: 你的endpoint # Endpoint:在阿里云oss控制台查看自己使用的endpoint
bucketName: 你的bucketName # bucket 名称
编写oss工具类
@Component
public class OssUtils {
@Value("${aliyun.accessKeyId}")
private String accessKeyId;
@Value("${aliyun.secretAccessKey}")
private String secretAccessKey;
@Value("${aliyun.oss.endPoint}")
private String endPoint;
@Value("${aliyun.oss.bucketName}")
private String bucketName;
public String uploadOneFile(MultipartFile file) {
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, secretAccessKey);
//设置文件名
String fileName = new DateTime().toString("yyyy/MM/dd")
+ UUID.randomUUID().toString().replace("-", "")
+ file.getOriginalFilename();
try {
// 创建PutObject请求。
ossClient.putObject(bucketName, fileName, file.getInputStream());
String url = "http://" + bucketName + "." + endPoint + "/" + fileName;
return url;
} catch (Exception e) {
e.printStackTrace();
return null;
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
}
public List uploadArrayFile(MultipartFile[] files) {
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, secretAccessKey);
List list = new ArrayList<>();
try {
//设置文件名
for (MultipartFile file : files) {
String fileName = new DateTime().toString("yyyy/MM/dd")
+ UUID.randomUUID().toString().replace("-", "")
+ file.getOriginalFilename();
// 创建PutObject请求。
ossClient.putObject(bucketName, fileName, file.getInputStream());
String url = "http://" + bucketName + "." + endPoint + "/" + fileName;
// System.out.println(url);
list.add(url);
}
} catch (Exception e) {
e.printStackTrace();
return null;
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
return list;
}
public boolean deleteFile(String fileUrl) {
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, secretAccessKey);
/** oss删除文件是根据文件完成路径删除的,但文件完整路径中不能包含Bucket名称。
* 比如文件路径为:http://edu-czf.oss-cn-guangzhou.aliyuncs.com/2022/08/abc.jpg",
* 则完整路径就是:2022/08/abc.jpg
*/
int begin = ("http://" + bucketName + "." + endPoint + "/").length(); //找到文件路径的开始下标
String deleteUrl = fileUrl.substring(begin);
try {
// 删除文件请求
ossClient.deleteObject(bucketName, deleteUrl);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
}
}
编写controller
@RestController
@Api(tags = "OSS对象存储Controller")
@RequestMapping("/oss")
public class OssController {
@Autowired
OssUtils ossUtils;
@PostMapping("upload")
public AjaxResult uploadFile(MultipartFile file) {
//返回上传oss的url
String url = ossUtils.uploadOneFile(file);
AjaxResult ajax = AjaxResult.success();
ajax.put("fileName", file.getOriginalFilename());
ajax.put("url", url);
return ajax;
}
@PostMapping("uploadArrayFile")
public List uploadArrayFile(MultipartFile[] files) {
//返回上传oss的url
return ossUtils.uploadArrayFile(files);
}
@PostMapping("deleteFile")
public boolean deleteFile(@RequestBody String fileUrl) {
//返回是否删除成功
return ossUtils.deleteFile(fileUrl);
}
}
前端
前端主要是拿ImageUpload改造一下,具体改造点如下:
更改调用接口

去掉baseUrl

回调成功后url改成真实url

main.js中挂在该组件
import OssImageUpload from "@/components/OssImageUpload"
Vue.component('OssImageUpload', OssImageUpload)
具体调用代码
OssImageUpload具体代码
请上传
大小不超过 {{ fileSize }}MB
格式为 {{ fileType.join("/") }}
的文件
本文仅代表作者观点,版权归原创者所有,如需转载请在文中注明来源及作者名字。
免责声明:本文系转载编辑文章,仅作分享之用。如分享内容、图片侵犯到您的版权或非授权发布,请及时与我们联系进行审核处理或删除,您可以发送材料至邮箱:service@tojoy.com



