Browse Source

优化: 头像缩略图20k,其他缩略图50kb

master
xsx 8 months ago
parent
commit
f8d59a1fc8
  1. 4
      im-platform/src/main/java/com/bx/implatform/controller/FileController.java
  2. 2
      im-platform/src/main/java/com/bx/implatform/service/FileService.java
  3. 6
      im-platform/src/main/java/com/bx/implatform/service/impl/FileServiceImpl.java
  4. 7
      im-uniapp/components/image-upload/image-upload.vue
  5. 36
      im-uniapp/pages/group/group-edit.vue
  6. 2
      im-uniapp/pages/mine/mine-edit.vue
  7. 5
      im-web/src/components/common/FileUpload.vue
  8. 2
      im-web/src/components/setting/Setting.vue
  9. 2
      im-web/src/view/Group.vue

4
im-platform/src/main/java/com/bx/implatform/controller/FileController.java

@ -25,8 +25,8 @@ public class FileController {
@Operation(summary = "上传图片", description = "上传图片,上传后返回原图和缩略图的url") @Operation(summary = "上传图片", description = "上传图片,上传后返回原图和缩略图的url")
@PostMapping("/image/upload") @PostMapping("/image/upload")
public Result<UploadImageVO> uploadImage(@RequestParam("file") MultipartFile file, public Result<UploadImageVO> uploadImage(@RequestParam("file") MultipartFile file,
@RequestParam(defaultValue = "true") Boolean isPermanent) { @RequestParam(defaultValue = "true") Boolean isPermanent, @RequestParam(defaultValue = "50") Long thumbSize) {
return ResultUtils.success(fileService.uploadImage(file,isPermanent)); return ResultUtils.success(fileService.uploadImage(file, isPermanent,thumbSize));
} }
@Operation(summary = "上传文件", description = "上传文件,上传后返回文件url") @Operation(summary = "上传文件", description = "上传文件,上传后返回文件url")

2
im-platform/src/main/java/com/bx/implatform/service/FileService.java

@ -9,7 +9,7 @@ public interface FileService extends IService<FileInfo> {
String uploadFile(MultipartFile file); String uploadFile(MultipartFile file);
UploadImageVO uploadImage(MultipartFile file,Boolean isPermanent); UploadImageVO uploadImage(MultipartFile file,Boolean isPermanent,Long thumbSize);
} }

6
im-platform/src/main/java/com/bx/implatform/service/impl/FileServiceImpl.java

@ -92,7 +92,7 @@ public class FileServiceImpl extends ServiceImpl<FileInfoMapper, FileInfo> imple
@Transactional @Transactional
@Override @Override
public UploadImageVO uploadImage(MultipartFile file, Boolean isPermanent) { public UploadImageVO uploadImage(MultipartFile file, Boolean isPermanent,Long thumbSize) {
try { try {
Long userId = SessionContext.getSession().getUserId(); Long userId = SessionContext.getSession().getUserId();
// 大小校验 // 大小校验
@ -129,9 +129,9 @@ public class FileServiceImpl extends ServiceImpl<FileInfoMapper, FileInfo> imple
throw new GlobalException(ResultCode.PROGRAM_ERROR, "图片上传失败"); throw new GlobalException(ResultCode.PROGRAM_ERROR, "图片上传失败");
} }
vo.setOriginUrl(generUrl(FileType.IMAGE, fileName)); vo.setOriginUrl(generUrl(FileType.IMAGE, fileName));
if (file.getSize() > 50 * 1024) { if (file.getSize() > thumbSize * 1024) {
// 大于50K的文件需上传缩略图 // 大于50K的文件需上传缩略图
byte[] imageByte = ImageUtil.compressForScale(file.getBytes(), 30); byte[] imageByte = ImageUtil.compressForScale(file.getBytes(), thumbSize);
String thumbFileName = minioSerivce.upload(minioProps.getBucketName(), minioProps.getImagePath(), String thumbFileName = minioSerivce.upload(minioProps.getBucketName(), minioProps.getImagePath(),
file.getOriginalFilename(), imageByte, file.getContentType()); file.getOriginalFilename(), imageByte, file.getContentType());
if (StringUtils.isEmpty(thumbFileName)) { if (StringUtils.isEmpty(thumbFileName)) {

7
im-uniapp/components/image-upload/image-upload.vue

@ -33,6 +33,10 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
thumbSize: {
type: Number,
default: 50
},
onBefore: { onBefore: {
type: Function, type: Function,
default: null default: null
@ -63,8 +67,9 @@ export default {
}) })
}, },
uploadImage(file) { uploadImage(file) {
let action = `/image/upload?isPermanent=${this.isPermanent}&thumbSize=${this.thumbSize}`
uni.uploadFile({ uni.uploadFile({
url: UNI_APP.BASE_URL + '/image/upload?isPermanent=' + this.isPermanent, url: UNI_APP.BASE_URL + action,
header: { header: {
accessToken: uni.getStorageSync("loginInfo").accessToken accessToken: uni.getStorageSync("loginInfo").accessToken
}, },

36
im-uniapp/pages/group/group-edit.vue

@ -1,11 +1,11 @@
<template> <template>
<view class="page group-edit"> <view class="page group-edit">
<nav-bar back>修改群资料</nav-bar> <nav-bar back>修改群资料</nav-bar>
<view class="form"> <view class="form">
<view class="form-item"> <view class="form-item">
<view class="label">群聊头像</view> <view class="label">群聊头像</view>
<view class="value"></view> <view class="value"></view>
<image-upload v-if="isOwner" :isPermanent="true" :onSuccess="onUnloadImageSuccess"> <image-upload v-if="isOwner" :isPermanent="true" :thumbSize="20" :onSuccess="onUnloadImageSuccess">
<image :src="group.headImageThumb" class="group-image"></image> <image :src="group.headImageThumb" class="group-image"></image>
</image-upload> </image-upload>
<head-image v-else class="group-image" :name="group.showGroupName" :url="group.headImageThumb" <head-image v-else class="group-image" :name="group.showGroupName" :url="group.headImageThumb"
@ -13,21 +13,24 @@
</view> </view>
<view class="form-item"> <view class="form-item">
<view class="label">群聊名称</view> <view class="label">群聊名称</view>
<input class="input" :class="isOwner?'':'disable'" maxlength="20" v-model="group.name" :disabled="!isOwner" placeholder="请输入群聊名称"/> <input class="input" :class="isOwner?'':'disable'" maxlength="20" v-model="group.name"
:disabled="!isOwner" placeholder="请输入群聊名称" />
</view> </view>
<view class="form-item"> <view class="form-item">
<view class="label">群聊备注</view> <view class="label">群聊备注</view>
<input class="input" maxlength="20" v-model="group.remarkGroupName" :placeholder="group.name"/> <input class="input" maxlength="20" v-model="group.remarkGroupName" :placeholder="group.name" />
</view> </view>
<view class="form-item"> <view class="form-item">
<view class="label">我在本群的昵称</view> <view class="label">我在本群的昵称</view>
<input class="input" maxlength="20" v-model="group.remarkNickName" :placeholder="userStore.userInfo.nickName"/> <input class="input" maxlength="20" v-model="group.remarkNickName"
:placeholder="userStore.userInfo.nickName" />
</view> </view>
<view class="form-item"> <view class="form-item">
<view class="label">群公告</view> <view class="label">群公告</view>
<textarea class="notice" :class="isOwner?'':'disable'" maxlength="512" :disabled="!isOwner" v-model="group.notice" :placeholder="isOwner?'请输入群公告':''"></textarea> <textarea class="notice" :class="isOwner?'':'disable'" maxlength="512" :disabled="!isOwner"
v-model="group.notice" :placeholder="isOwner?'请输入群公告':''"></textarea>
</view> </view>
</view> </view>
<button class="bottom-btn" type="primary" @click="submit()">提交</button> <button class="bottom-btn" type="primary" @click="submit()">提交</button>
</view> </view>
</template> </template>
@ -147,43 +150,43 @@ export default {
.form { .form {
margin-top: 20rpx; margin-top: 20rpx;
.form-item { .form-item {
padding: 0 40rpx; padding: 0 40rpx;
display: flex; display: flex;
background: white; background: white;
align-items: center; align-items: center;
margin-bottom: 2rpx; margin-bottom: 2rpx;
.label { .label {
width: 220rpx; width: 220rpx;
line-height: 100rpx; line-height: 100rpx;
font-size: $im-font-size; font-size: $im-font-size;
white-space: nowrap; white-space: nowrap;
} }
.value{ .value {
flex: 1; flex: 1;
} }
.input { .input {
flex: 1; flex: 1;
text-align: right; text-align: right;
line-height: 100rpx; line-height: 100rpx;
font-size: $im-font-size-small; font-size: $im-font-size-small;
} }
.disable { .disable {
color: $im-text-color-lighter; color: $im-text-color-lighter;
} }
.notice { .notice {
flex: 1; flex: 1;
font-size: $im-font-size-small; font-size: $im-font-size-small;
max-height: 200rpx; max-height: 200rpx;
padding: 14rpx 0; padding: 14rpx 0;
} }
.group-image { .group-image {
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
@ -193,5 +196,4 @@ export default {
} }
} }
} }
</style>
</style>

2
im-uniapp/pages/mine/mine-edit.vue

@ -4,7 +4,7 @@
<view class="form"> <view class="form">
<view class="form-item"> <view class="form-item">
<view class="label">头像</view> <view class="label">头像</view>
<image-upload class="value" :isPermanent="true" :onSuccess="onUnloadImageSuccess"> <image-upload class="value" :isPermanent="true" :thumbSize="20" :onSuccess="onUnloadImageSuccess">
<image :src="userInfo.headImageThumb" class="head-image"></image> <image :src="userInfo.headImageThumb" class="head-image"></image>
</image-upload> </image-upload>
</view> </view>

5
im-web/src/components/common/FileUpload.vue

@ -55,8 +55,11 @@ export default {
} }
let formData = new FormData() let formData = new FormData()
formData.append('file', file.file) formData.append('file', file.file)
let url = this.action;
url += this.action.includes("?") ? "&" : "?"
url += 'isPermanent=' + this.isPermanent;
this.$http({ this.$http({
url: this.action + '?isPermanent=' + this.isPermanent, url: url,
data: formData, data: formData,
method: 'post', method: 'post',
headers: { headers: {

2
im-web/src/components/setting/Setting.vue

@ -87,7 +87,7 @@ export default {
}, },
computed: { computed: {
imageAction() { imageAction() {
return `/image/upload`; return `/image/upload?thumbSize=20`;
} }
}, },
watch: { watch: {

2
im-web/src/view/Group.vue

@ -295,7 +295,7 @@ export default {
return this.activeGroup.ownerId == this.userStore.userInfo.id; return this.activeGroup.ownerId == this.userStore.userInfo.id;
}, },
imageAction() { imageAction() {
return `/image/upload`; return `/image/upload?thumbSize=20`;
}, },
groupMap() { groupMap() {
// //

Loading…
Cancel
Save