-
写代码之前的准备工作：
1.在阿里云oss登录并实名认证
开通对象存储控制台oss，新建一个bucket（多个单词中划线分割），开通AccessKey（可以改地址），记录id号，后面会用到
image
后端：
pom.xml
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>2.8.3</version>
</dependency>
- 第一个测试程序，测试阿里云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();
}
}
Mapper类
@Update("UPDATE t_user SET nickname=#{nickname} WHERE id =#{id}")
void nickname(User user);
Service类
void nickname(User user);
编写实现类：
@Override
public void nickname(User user) {
userMapper.nickname(user);
}
}
测试类：
@Test
public void nickname() {
User user=userService.getUserById(1);
user.setNickname("明天");
userService.updateUser(user);
}
编写测试程序：UploadController
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();
}
}
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();
}
在swagger里面测试如果是200就成功了
前端：
1.setting页面点击用户资料跳转到user_info页面，别忘了在pages.json注册新页面
<navigator url="../user_info/user_info">
个人资料
</navigator>
2.user_info页面
<view class="container">
<view class="list">
<view class="list-item">
<view class="left">昵称</view>
<view class="right">
<navigator url="../user_name/user_name" class="list-item">
{{ nickname }}
</navigator>
</view>
<!-- <navigator url="../user_name/user_name">昵称：{{nickname}}</navigator> -->
<!-- <input v-model="nickname" class="nickname"/> -->
</view>
<view class="list-item">
<text>头像：</text>
<image :src="avatar" class="avatar" @tap="showActionSheet"></image>
</view>
<view class="list-item"><text>修改密码</text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
nickname: uni.getStorageSync('login_key').nickname,
avatar: uni.getStorageSync('login_key').avatar,
userId: uni.getStorageSync('login_key').userId
};
},
onLoad() {},
onShow() {
var _this = this;
uni.request({
// url: 'http://192.168.43.83:8080/api/user/' + uni.getStorageSync('login_key').userId,
url: this.apiServer + '/user/' + uni.getStorageSync('login_key').userId,
method: 'GET',
header: { 'content-type': 'application/json' },
success: res => {
if (res.data.code === 0) {
console.log(res.data.data.avatar + '————————————');
_this.avatar = res.data.data.avatar;
_this.nickname = res.data.data.nickname;
}
}
});
},
methods: {
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://192.168.43.83:8080/api/user/avatar',
// url: this.apiServer + '/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://192.168.43.83:8080/api/user/avatar',
/* url:this.apiServer + '/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);
}
});
}
}
};
</script>
<style scoped>
.list-item {
display: flex;
height: 80px;
align-items: center;
justify-content: space-between;
}
/* .nickname{
float: right;
} */
</style>
网友评论