目录
一、阿里云OSS控制台:https://oss.console.aliyun.com/bucket
一、阿里云OSS控制台:https://oss.console.aliyun.com/bucket
二、预留空间和资源包的区别
-
OSS资源包:是一种包含特定数量存储空间、请求次数或传输量的优惠套餐。当使用量达到资源包内的数量时,系统会优先抵扣资源包内的额度。资源包通常有固定的有效期,一旦购买即刻生效,并在到期后失效。资源包的具体操作支持情况会在购买时明确说明。
-
预留空间:是一个对最大存储容量的保证承诺。用户需要为一定的存储空间支付费用,以换取在未来一段时间内不超过这个容量限制的使用权。预留空间的价格通常比按量付费更优惠,特别适合那些数据规模有稳定增长预期的客户。但是,如果只购买了预留空间而没购买资源包,那么预留空间不会自动抵扣其他费用,如存储费用、请求次数和数据传输费等。
三、阿里云OSS配置说明
-
创建Bucket,即存储文件容器
-
配置跨域访问,为了在网页中能访问OSS服务,需要为Bucket设置跨域访问规则
-
创建RAM用户和角色,在RAM控制台创建子账号并分配权限,确保后端服务可以使用这些凭证与OSS交互。
-
配置Endpoint和AccessKey,在OSS控制台配置Endpoint(访问点)和AccessKey ID,这是访问OSS服务所需要的身份验证信息。
-
配置SSL证书,如果需要使用HTTPS访问OSS,可以在OSS控制台上传SSL证书,以启用安全的文件传输。
-
配置OSS挂载点,对于函数计算服务,可以在函数计算控制台配置OSS挂载点,使得服务下的所有函数都可以访问指定的OSS存储空间。
-
自定义域名,如果需要使用自定义域名访问OSS中的文件,可以在OSS控制台进行相关配置,但要注意,该域名目前仅支持HTTP访问。
四、在阿里云控制台查看endpoint
五、java上传文件到OSS
1、添加gradle依赖
implementation 'com.aliyun.oss:aliyun-sdk-oss:2.8.3'
2、在application.yml配置OSS相关参数
aliyun:
cloud:
# 阿里云key
accessKey: LTAIxxxxxxUvBExxxbEcu
# 阿里云secret
accessSecret: S9rXxxxxxp3QI9PxxxxuHS0i3
oss:
# 阿里云存储桶
bucket: tourism-data
# 结尾域名
endpoint: oss-cn-hangzhou.aliyuncs.com
# 图片文件夹名
spotPath: spot-pictures
3、创建读取oss参数配置类StorageOss
@Data
@Configuration
public class StorageOss {
private static Logger log = LoggerFactory.getLogger(StorageOss.class);
@Value("${aliyun.cloud.accessKey}")
public String accessKeyId;
@Value("${aliyun.cloud.accessSecret}")
public String accessKeySecret;
@Value("${aliyun.cloud.oss.endpoint}")
public String endpoint;
@Value("${aliyun.cloud.oss.bucket}")
public String bucket;
@Value("${aliyun.cloud.oss.spotPath}")
public String soptPath;
}
4、创建OSS上传类OssService
/**
* OSS 上传
*
* @author zch
**/
@Configuration
public class OssService {
private static final Logger log = LoggerFactory.getLogger(OssService.class);
private OSSClient ossClient;
@Autowired
private StorageOss config;
@PostConstruct
public void initOssClient() {
ClientConfiguration clientConfig = new ClientConfiguration();
clientConfig.setConnectionTimeout(1_000);
clientConfig.setConnectionRequestTimeout(1_000);
clientConfig.setSocketTimeout(1_000);
clientConfig.setMaxErrorRetry(0);
clientConfig.setRequestTimeoutEnabled(true);
clientConfig.setRequestTimeout(1_000);
ossClient = new OSSClient(this.config.endpoint, this.config.accessKeyId,
this.config.accessKeySecret, clientConfig);
}
/**
* 上传文件
*
* @param path
* @param data
*/
public String uploadFile(String path, byte[] data) {
try {
log.debug("upload path = {}", path);
ossClient.putObject(this.config.bucket, path, new ByteArrayInputStream(data));
if (log.isDebugEnabled()) {
log.debug(this.config.endpoint.replaceFirst("http://", "http://" + this.config.bucket + ".") + "/" + path);
}
} catch (Exception e) {
log.error("upload file failed path = {}", path);
log.error("upload file failed ", e);
}
return "https://" + this.config.bucket + "." + this.config.endpoint + "/" + path;
}
/**
* 删除文件
*
* @param objName
*/
public void deleteFile(String objName) {
ossClient.deleteObject(this.config.bucket, objName);
}
public void copyFileToAnotherPath(String sourceObj, String targetObj) {
ossClient.copyObject(this.config.bucket,sourceObj,this.config.bucket,targetObj);
}
public StorageOss getStorageOss() {
return this.config;
}
}
5、创建文件上传路径拼接处理类UploadService
@Service
public class UploadService {
@Autowired
OssService oss;
/**
* 上传文件
* @param file 文件
* @param path 上传的文件夹名
* @return
*/
public AjaxResult upload(MultipartFile file,String path) {
try {
String url = this.uploadImage(file, path);
AjaxResult ajax = AjaxResult.success();
ajax.put("url", url);
return ajax;
} catch (IOException e) {
return AjaxResult.error("上传出现错误", e.getMessage());
}
}
/**
* 上传图片到oss
* @param file
* @param dir
* @return
* @throws IOException
*/
private String uploadImage(MultipartFile file, String dir) throws IOException {
UUID uuid = UUID.randomUUID();
String filename =uuid
+file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String path = dir + "/" + filename;
return oss.uploadFile(path, file.getBytes());
}
}
6、创建接收前端文件并调用oss上传类UploadController
@RestController
@RequestMapping("/mobile/upload")
public class UploadController {
@Autowired
private UploadService uploadService;
@Autowired
private StorageOss storageOss;
@PostMapping("/spotPictures")
public AjaxResult uploadSpotPictures(MultipartFile file) {
return uploadService.upload(file,storageOss.getSoptPath());
}
}
7、uview页面上传代码
<template>
<view class="box">
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
:maxCount="6" :previewFullImage="true"></u-upload>
<u-button type="primary" @click="submit" size="big" :text="articleId?'确认修改':'发布'"></u-button>
</view>
</template>
<script>
export default {
data() {
return {
picUrls: [],//后端数据
fileList: [] //前端上传
};
},
onLoad(option) {
//将后端数据转换到前端
this.fileList = [];
for (let i = 0; i < JSON.parse(this.picUrls).length; i++) {
this.fileList.push({
url: JSON.parse(this.picUrls)[i]
})
}
},
methods: {
submit() {
//将前端上传的数据赋值给后端字段提交
const list = [];
for (let i = 0; i < this.fileList.length; i++) {
list.push(this.fileList[i].url)
}
this.picUrls = JSON.stringify(list)
},
// 新增图片
async afterRead(event) {
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this.fileList.length
lists.map((item) => {
this.fileList.push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this.fileList[fileListLen]
this.fileList.splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
//上传图片
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: process.env.BASE_APP_URL + '/upload/spotPictures',
filePath: url,
header: {
"Content-Type": "multipart/form-data",
"Authorization": uni.getStorageSync('token')
},
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(JSON.parse(res.data).url)
}, 1000)
}
});
})
},
// 删除图片
deletePic(event) {
this.fileList.splice(event.index, 1)
}
},
};
</script>