1 准备工作
- 在阿里云申请AccessKey ID、Access Key Secret，保存
- 申请阿里云OSS，新建Bucket，目录，自己上传两张图片先试试
2. 后端接口开发
2.1 添加pom依赖
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>2.8.3</version>
</dependency>
2.2 测试阿里云OSS上传功能
public class AliOSSTest {
public static void main(String[] args) {
// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高
String accessKeyId = "****";
String accessKeySecret = "****";
String bucketName = "****";
String filedir = "avatar/";
String fileKey = "hello.jpg";
// 创建OSSClient实例
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
// 上传文件
PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileKey, new File("D:\\bg.jpg"));
//时间戳
Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
// 生成URL
URL url = ossClient.generatePresignedUrl(bucketName, filedir + fileKey, expiration);
System.out.println(url);
ossClient.shutdown();
}
}
2.3 编写上传接口程序，用swagger测试
package com.soft1721.jianyue.api.controller;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.PutObjectResult;
import com.soft1721.jianyue.api.util.ResponseResult;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.net.URL;
import java.util.Date;
import java.util.UUID;
@RestController
@RequestMapping(value = "/api")
public class UploadController {
@PostMapping("/avatar/upload")
public String ossUpload(@RequestParam("file") MultipartFile sourceFile) {
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
String accessKeyId = "***";
String accessKeySecret = "***";
String bucketName = "***";
String filedir = "avatar/";
// 获取源文件名
String fileName = sourceFile.getOriginalFilename();
// 获取源文件名后缀
String suffix = fileName.substring(fileName.lastIndexOf("."));
//uuid生成主文件名
String prefix = UUID.randomUUID().toString();
//新文件名
String newFileName = prefix + suffix;
//File类型的临时文件
File tempFile = null;
try {
//创建临时文件，用uuid主文件名+原后缀名
tempFile = File.createTempFile(prefix, prefix);
// MultipartFile转成File
sourceFile.transferTo(tempFile);
} catch (IOException e) {
e.printStackTrace();
}
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, filedir + newFileName, tempFile);
Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
// 生成URL
URL url = ossClient.generatePresignedUrl(bucketName, filedir + newFileName, expiration);
ossClient.shutdown();
//URL返回给客户端
return url.toString();
}
}
-
测试结果
上传测试.png
2.4 编写修改个人头像的接口，并且用JUnit、swagger测试
此处省略mapper层、service层，及单元测试
- UserController修改头像的接口
@PostMapping("/avatar")
public String ossUpload(@RequestParam("file") MultipartFile sourceFile,@RequestParam("userId") int userId) {
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
String accessKeyId = "***";
String accessKeySecret = "***";
String bucketName = "***";
String filedir = "avatar/";
// 获取文件名
String fileName = sourceFile.getOriginalFilename();
// 获取文件后缀
String suffix = fileName.substring(fileName.lastIndexOf("."));
//uuid生成主文件名
String prefix = UUID.randomUUID().toString();
String newFileName = prefix + suffix;
File tempFile = null;
try {
//创建临时文件
tempFile = File.createTempFile(prefix, prefix);
// MultipartFile to File
sourceFile.transferTo(tempFile);
} catch (IOException e) {
e.printStackTrace();
}
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, filedir + newFileName, tempFile);
Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
// 生成URL
URL url = ossClient.generatePresignedUrl(bucketName, filedir + newFileName, expiration);
ossClient.shutdown();
//根据userId查询出原始用户数据
User user = userService.getUserById(userId);
//更新头像属性
user.setAvatar(url.toString());
//修改用户信息并持久化
userService.updateUser(user);
//将头像链接返回给客户端，以便实时预览
return url.toString();
}
3.前端
- setting页面点击用户资料跳转到user_info页面，别忘了在pages.json注册新页面
<navigator url="../user_info/user_info">
个人资料
</navigator>
- user_info页面对头像做点击事件，点击弹出ActionSheet
<image :src="avatar" class="avatar" @tap="showActionSheet"></image>
- js部分的data数据
data() {
return {
nickname: uni.getStorageSync('login_key').nickname,
avatar: uni.getStorageSync('login_key').avatar,
userId: uni.getStorageSync('login_key').userId
};
}
- showActionSheet函数
showActionSheet: function() {
var _this = this;
uni.showActionSheet({
itemList: ['拍照', '从相册选择'],
success: function(res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
//选择的是拍照功能
if (res.tapIndex == 0) {
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: function(res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success: function() {
console.log('save success');
uni.uploadFile({
url: 'http://****:8080/api/user/avatar',
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
userId: _this.userId
},
success: uploadFileRes => {
console.log(uploadFileRes.data);
_this.avatar = uploadFileRes.data;
}
});
}
});
}
});
}
//从相册选择
if (res.tapIndex == 1) {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都
sourceType: ['album'], //从相册选择
success: function(res) {
console.log(JSON.stringify(res.tempFilePaths));
uni.uploadFile({
url: 'http://******:8080/api/user/avatar',
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
userId: _this.userId
},
success: uploadFileRes => {
console.log(uploadFileRes.data);
_this.avatar = uploadFileRes.data;
}
});
}
});
}
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
- 运行
