Переглянути джерело

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

xsx 7 місяців тому
батько
коміт
f8d59a1fc8

+ 2 - 2
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")

+ 1 - 1
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);
 
 
 }

+ 3 - 3
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)) {

+ 6 - 1
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
 				},

+ 19 - 17
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,21 +13,24 @@
 			</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>	
+		</view>
 		<button class="bottom-btn" type="primary" @click="submit()">提交</button>
 	</view>
 </template>
@@ -147,43 +150,43 @@ export default {
 
 	.form {
 		margin-top: 20rpx;
-	
+
 		.form-item {
 			padding: 0 40rpx;
 			display: flex;
 			background: white;
 			align-items: center;
 			margin-bottom: 2rpx;
-	
+
 			.label {
 				width: 220rpx;
 				line-height: 100rpx;
 				font-size: $im-font-size;
 				white-space: nowrap;
 			}
-			
-			.value{
+
+			.value {
 				flex: 1;
 			}
-			
+
 			.input {
 				flex: 1;
 				text-align: right;
 				line-height: 100rpx;
 				font-size: $im-font-size-small;
 			}
-			
+
 			.disable {
 				color: $im-text-color-lighter;
 			}
-			
+
 			.notice {
 				flex: 1;
 				font-size: $im-font-size-small;
 				max-height: 200rpx;
 				padding: 14rpx 0;
 			}
-			
+
 			.group-image {
 				width: 120rpx;
 				height: 120rpx;
@@ -193,5 +196,4 @@ export default {
 		}
 	}
 }
-
-</style>
+</style>

+ 1 - 1
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>

+ 4 - 1
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: {

+ 1 - 1
im-web/src/components/setting/Setting.vue

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

+ 1 - 1
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() {
 			// 按首字母分组