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

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

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

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

@ -1,11 +1,11 @@
<template>
<view class="page group-edit">
<view class="page group-edit">
<nav-bar back>修改群资料</nav-bar>
<view class="form">
<view class="form-item">
<view class="label">群聊头像</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-upload>
<head-image v-else class="group-image" :name="group.showGroupName" :url="group.headImageThumb"
@ -13,19 +13,22 @@
</view>
<view class="form-item">
<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 class="form-item">
<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 class="form-item">
<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 class="form-item">
<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>
<button class="bottom-btn" type="primary" @click="submit()">提交</button>
@ -162,7 +165,7 @@ export default {
white-space: nowrap;
}
.value{
.value {
flex: 1;
}
@ -193,5 +196,4 @@ export default {
}
}
}
</style>

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

@ -4,7 +4,7 @@
<view class="form">
<view class="form-item">
<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-upload>
</view>

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

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

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

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

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

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

Loading…
Cancel
Save