From b9062a4680e0b10461e2ad77e20d930992d170c9 Mon Sep 17 00:00:00 2001 From: "xie.bx" Date: Sun, 30 Oct 2022 23:04:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=8F=91=E9=80=81=E6=96=87?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/lx/common/contant/Contant.java | 12 +++ .../implatform/controller/FileController.java | 11 ++- .../service/thirdparty/FileService.java | 20 ++++- im-ui/src/api/httpRequest.js | 6 +- im-ui/src/components/chat/MessageItem.vue | 76 ++++++++++++++++++- im-ui/src/components/common/FileUpload.vue | 27 ++++--- im-ui/src/main.js | 4 +- im-ui/src/store/chatStore.js | 3 - im-ui/src/view/Chat.vue | 75 +++++++++++++++++- 9 files changed, 198 insertions(+), 36 deletions(-) create mode 100644 commom/src/main/java/com/lx/common/contant/Contant.java diff --git a/commom/src/main/java/com/lx/common/contant/Contant.java b/commom/src/main/java/com/lx/common/contant/Contant.java new file mode 100644 index 0000000..f24130e --- /dev/null +++ b/commom/src/main/java/com/lx/common/contant/Contant.java @@ -0,0 +1,12 @@ +package com.lx.common.contant; + + + +public class Contant { + + public static final long MAX_IMAGE_SIZE = 5*1024*1024; + + public static final long MAX_FILE_SIZE = 10*1024*1024; + + +} diff --git a/im-platform/src/main/java/com/lx/implatform/controller/FileController.java b/im-platform/src/main/java/com/lx/implatform/controller/FileController.java index 5706e07..4e39c10 100644 --- a/im-platform/src/main/java/com/lx/implatform/controller/FileController.java +++ b/im-platform/src/main/java/com/lx/implatform/controller/FileController.java @@ -8,7 +8,6 @@ import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; -import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; @@ -27,12 +26,16 @@ public class FileController { @Autowired private FileService fileService; - @ApiOperation(value = "上传图片",notes="上传图片") + @ApiOperation(value = "上传图片",notes="上传图片,上传后返回原图和缩略图的url") @PostMapping("/image/upload") - public Result upload(MultipartFile file) { + public Result uploadImage(MultipartFile file) { return ResultUtils.success(fileService.uploadImage(file)); } - + @ApiOperation(value = "上传文件",notes="上传文件，上传后返回文件url") + @PostMapping("/file/upload") + public Result uploadFile(MultipartFile file) { + return ResultUtils.success(fileService.uploadFile(file),""); + } } \ No newline at end of file diff --git a/im-platform/src/main/java/com/lx/implatform/service/thirdparty/FileService.java b/im-platform/src/main/java/com/lx/implatform/service/thirdparty/FileService.java index a34a0d3..73cf455 100644 --- a/im-platform/src/main/java/com/lx/implatform/service/thirdparty/FileService.java +++ b/im-platform/src/main/java/com/lx/implatform/service/thirdparty/FileService.java @@ -1,8 +1,8 @@ package com.lx.implatform.service.thirdparty; +import com.lx.common.contant.Contant; import com.lx.common.enums.FileTypeEnum; import com.lx.common.enums.ResultCode; -import com.lx.implatform.util.FileUtil; import com.lx.implatform.exception.GlobalException; import com.lx.implatform.util.FileUtil; import com.lx.implatform.util.ImageUtil; @@ -48,8 +48,26 @@ public class FileService { } } + + public String uploadFile(MultipartFile file){ + // 大小校验 + if(file.getSize() > Contant.MAX_FILE_SIZE){ + throw new GlobalException(ResultCode.PROGRAM_ERROR,"文件大小不能超过10M"); + } + // 上传 + String fileName = minioUtil.upload(bucketName,filePath,file); + if(StringUtils.isEmpty(fileName)){ + throw new GlobalException(ResultCode.PROGRAM_ERROR,"文件上传失败"); + } + return generUrl(FileTypeEnum.FILE,fileName); + } + public UploadImageVO uploadImage(MultipartFile file){ try { + // 大小校验 + if(file.getSize() > Contant.MAX_IMAGE_SIZE){ + throw new GlobalException(ResultCode.PROGRAM_ERROR,"图片大小不能超过5M"); + } // 图片格式校验 if(!FileUtil.isImage(file.getOriginalFilename())){ throw new GlobalException(ResultCode.PROGRAM_ERROR,"图片格式不合法"); diff --git a/im-ui/src/api/httpRequest.js b/im-ui/src/api/httpRequest.js index 9bd20f2..883162b 100644 --- a/im-ui/src/api/httpRequest.js +++ b/im-ui/src/api/httpRequest.js @@ -1,10 +1,6 @@ import axios from 'axios' import router from '@/router' -import qs from 'qs' -import merge from 'lodash/merge' -import { - Message -} from 'element-ui' +import {Message} from 'element-ui' const http = axios.create({ timeout: 1000 * 30, diff --git a/im-ui/src/components/chat/MessageItem.vue b/im-ui/src/components/chat/MessageItem.vue index 283a293..b667b2a 100644 --- a/im-ui/src/components/chat/MessageItem.vue +++ b/im-ui/src/components/chat/MessageItem.vue @@ -18,6 +18,19 @@ +
+
+
+ {{data.name}} + +
{{fileSize}}
+
+
+ +
+
+ +
@@ -58,11 +71,27 @@ }, computed:{ loading(){ - return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loadding"; + return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading"; }, loadFail(){ return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail"; - } + }, + data(){ + return JSON.parse(this.msgInfo.content) + }, + fileSize(){ + let size = this.data.size; + if (size > 1024 * 1024) { + return Math.round(size / 1024 / 1024) + "M"; + } + if (size > 1024) { + return Math.round(size / 1024) + "KB"; + } + return size + "B"; + }, + }, + mounted() { + //console.log(this.msgInfo); } } @@ -132,8 +161,6 @@ flex-wrap: nowrap; flex-direction: row; align-items: center; - - .send-image{ min-width: 300px; min-height: 200px; @@ -150,6 +177,43 @@ margin: 0 20px; } } + + .im-msg-file{ + display: flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; + cursor: pointer; + + .im-file-box{ + display: flex; + flex-wrap: nowrap; + align-items: center; + width: 20%; + min-height: 80px; + border: #dddddd solid 1px; + border-radius: 3px; + background-color: #eeeeee; + padding: 10px 15px; + .im-file-info{ + flex:1; + height: 100%; + text-align: left; + font-size: 14px; + .im-file-name { + font-size: 16px; + font-weight: 600; + margin-bottom: 15px; + } + } + + .im-file-icon{ + font-size: 50px; + color: #d42e07; + } + } + + } } } @@ -196,6 +260,10 @@ .im-msg-image { flex-direction: row-reverse; } + + .im-msg-file { + flex-direction: row-reverse; + } } } diff --git a/im-ui/src/components/common/FileUpload.vue b/im-ui/src/components/common/FileUpload.vue index f089c94..bdd83ee 100644 --- a/im-ui/src/components/common/FileUpload.vue +++ b/im-ui/src/components/common/FileUpload.vue @@ -1,5 +1,8 @@