準(zhǔn)備
后端接口
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>2.8.3</version>
</dependency>
- 測(cè)試阿里云OSS上傳功能 AliOSSTest
public class AliOSSTest {
public static void main(String[] args) {
// Endpoint以杭州為例极颓，其它Region請(qǐng)按實(shí)際情況填寫朱盐。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主賬號(hào)AccessKey擁有所有API的訪問(wèn)權(quán)限，風(fēng)險(xiǎn)很高
String accessKeyId = "****";
String accessKeySecret = "****";
String bucketName = "****";
String filedir = "avatar/";
String fileKey = "hello.jpg";
// 創(chuàng)建OSSClient實(shí)例
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
// 上傳文件
PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileKey, new File("D:\\bg.jpg"));
//時(shí)間戳
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();
}
}
- 編寫上傳接口程序菠隆，然后用swagger測(cè)試
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類型的臨時(shí)文件
File tempFile = null;
try {
//創(chuàng)建臨時(shí)文件兵琳，用uuid主文件名+原后綴名
tempFile = File.createTempFile(prefix, prefix);
// MultipartFile轉(zhuǎn)成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();
}
}
- 編寫修改個(gè)人頭像的接口，并且用JUnit浸赫、swagger測(cè)試
省略mapper層闰围、service層，自行完成并進(jìn)行單元測(cè)試
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 {
//創(chuàng)建臨時(shí)文件
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();
//根據(jù)userId查詢出原始用戶數(shù)據(jù)
User user = userService.getUserById(userId);
//更新頭像屬性
user.setAvatar(url.toString());
//修改用戶信息并持久化
userService.updateUser(user);
//將頭像鏈接返回給客戶端既峡，以便實(shí)時(shí)預(yù)覽
return url.toString();
}
前端
- setting頁(yè)面點(diǎn)擊用戶資料跳轉(zhuǎn)到user_info頁(yè)面，pages.json中注冊(cè)新頁(yè)面
<navigator url="../user_info/user_info">
個(gè)人資料
</navigator>
<template>
<view class="container">
<view class="list">
<view class="list-item list-item-heigher">
<view class="left">昵稱</view>
<view class="right">{{nickname}}</view>
<navigator url=""></navigator>
</view>
<view class="list-item list-item-heigher">
<view class="left">頭像</view>
<view class="right"><image :src="avatar" class="avatar" @tap="showActionSheet"></image></view>
</view>
<view class="list-item list-item-heigher"><view class="left">修改密碼</view></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
nickname: '',
avatar:'',
userId: uni.getStorageSync('login_key').userId
};
},
onLoad() {
},
onShow() {
var _this = this;
uni.request({
url: 'http://localhost:8080/api/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() {
console.log('show');
var _this = this;
uni.showActionSheet({
itemList: ['拍照', '從相冊(cè)選擇'],
success: function(res) {
console.log('選中了第' + (res.tapIndex + 1) + '個(gè)按鈕');
//選擇的是拍照功能
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://localhost:8080/api/user/avatar', //僅為示例碧查，非真實(shí)的接口地址
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
userId: _this.userId
},
success: uploadFileRes => {
console.log(uploadFileRes.data);
_this.avatar = uploadFileRes.data;
}
});
}
});
}
});
}
//從相冊(cè)選擇
if (res.tapIndex == 1) {
uni.chooseImage({
count: 1, //默認(rèn)9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖运敢，默認(rèn)二者都
sourceType: ['album'], //從相冊(cè)選擇
success: function(res) {
console.log(JSON.stringify(res.tempFilePaths));
uni.uploadFile({
url: 'http://localhost: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);
}
});
}
}
};
</script>
<style>
.list-item-heigher {
height: 80px;
display: flex;
}
.left {
flex: 1 1 30%;
}
.right {
flex: 1 1 70%;
}
</style>
