修复token过期导致文件上传失败的问题

2 years ago · 84ad493bb7
6 changed files with 52 additions and 49 deletions
--- a/im-platform/src/main/resources/application.yml
+++ b/im-platform/src/main/resources/application.yml
@ -32,11 +32,11 @@ mybatis-plus:
    # *.xml的具体路径
    - classpath*:mapper/*.xml
 minio:
-  endpoint: http://42.194.187.243:9001 #内网地址
-  public: http://42.194.187.243:9001 #外网访问地址
+  endpoint: http://127.0.0.1:9001 #内网地址
+  public: http://127.0.0.1:9001  #外网访问地址
  accessKey: admin
-  secretKey: admin123456
-  bucketName: box-im2
+  secretKey: 12345678
+  bucketName: box-im
  imagePath: image
  filePath: file

--- a/im-ui/src/api/httpRequest.js
+++ b/im-ui/src/api/httpRequest.js
@ -54,7 +54,9 @@ http.interceptors.response.use(async response => {
 		sessionStorage.setItem("accessToken", data.accessToken);
 		sessionStorage.setItem("refreshToken", data.refreshToken);
 		// 这里需要把headers清掉，否则请求时会报错，原因暂不详...
-		response.config.headers=undefined;
+		if(typeof response.config.data != 'object'){
+			response.config.headers=undefined;
+		}
 		// 重新发送刚才的请求
 		return http(response.config)
 	} else {
--- a/im-ui/src/components/chat/ChatBox.vue
+++ b/im-ui/src/components/chat/ChatBox.vue
@ -27,14 +27,14 @@
 									@click.stop="showEmotionBox()">
 								</div>
 								<div title="发送图片">
-									<file-upload :action="imageAction" :maxSize="5*1024*1024"
+									<file-upload :action="'/image/upload'" :maxSize="5*1024*1024"
 										:fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp','image/gif']"
 										@before="onImageBefore" @success="onImageSuccess" @fail="onImageFail">
 										<i class="el-icon-picture-outline"></i>
 									</file-upload>
 								</div>
 								<div title="发送文件">
-									<file-upload :action="fileAction" :maxSize="10*1024*1024" @before="onFileBefore"
+									<file-upload :action="'/file/upload'" :maxSize="10*1024*1024" @before="onFileBefore"
 										@success="onFileSuccess" @fail="onFileFail">
 										<i class="el-icon-wallet"></i>
 									</file-upload>
@ -264,7 +264,7 @@
 				this.sendImageFile = null;
 			},
 			onImageSuccess(data, file) {
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo || file.raw.msgInfo));
+				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.content = JSON.stringify(data);
 				this.$http({
 					url: this.messageAction,
@ -277,7 +277,7 @@
 				})
 			},
 			onImageFail(e, file) {
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo || file.raw.msgInfo));
+				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.loadStatus = 'fail';
 				this.$store.commit("insertMessage", msgInfo);
 			},
@ -313,7 +313,7 @@
 					size: file.size,
 					url: url
 				}
-				let msgInfo = JSON.parse(JSON.stringify(file.raw.msgInfo));
+				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.content = JSON.stringify(data);
 				this.$http({
 					url: this.messageAction,
@ -326,7 +326,7 @@
 				})
 			},
 			onFileFail(e, file) {
-				let msgInfo = JSON.parse(JSON.stringify(file.raw.msgInfo));
+				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.loadStatus = 'fail';
 				this.$store.commit("insertMessage", msgInfo);
 			},
@ -462,7 +462,7 @@
 				let file = this.sendImageFile;
 				this.onImageBefore(this.sendImageFile);
 				let formData = new FormData()
-				formData.append('file', file.raw || file)
+				formData.append('file',  file)
 				this.$http.post("/image/upload", formData, {
 					headers: {
 						'Content-Type': 'multipart/form-data'
@ -546,6 +546,7 @@
 				if(this.chat.unreadCount==0){
 					return;
 				}
+				this.$store.commit("resetUnreadCount", this.chat)
 				if (this.chat.type == "GROUP") {
 					var url = `/message/group/readed?groupId=${this.chat.targetId}`
 				} else {
@ -554,9 +555,7 @@
 				this.$http({
 					url: url,
 					method: 'put'
-				}).then(() => {
-					this.$store.commit("resetUnreadCount", this.chat)
-				})
+				}).then(() => {})
 			},
 			loadGroup(groupId) {
 				this.$http({
@ -631,12 +630,6 @@
 				}
 				return title;
 			},
-			imageAction() {
-				return `${process.env.VUE_APP_BASE_API}/image/upload`;
-			},
-			fileAction() {
-				return `${process.env.VUE_APP_BASE_API}/file/upload`;
-			},
 			messageAction() {
 				return `/message/${this.chat.type.toLowerCase()}/send`;
 			},
--- a/im-ui/src/components/common/FileUpload.vue
+++ b/im-ui/src/components/common/FileUpload.vue
@ -1,6 +1,6 @@
 <template>
-	<el-upload :action="action" :headers="uploadHeaders" :accept="fileTypes==null?'':fileTypes.join(',')"
-	 :show-file-list="false" :on-success="onSuccess" :on-error="onError" :disabled="disabled" :before-upload="beforeUpload">
+	<el-upload :action="'#'" :http-request="onFileUpload" :accept="fileTypes==null?'':fileTypes.join(',')" :show-file-list="false"
+		:disabled="disabled" :before-upload="beforeUpload">
 		<slot></slot>
 	</el-upload>
 </template>
@ -11,13 +11,15 @@
 		data() {
 			return {
 				loading: null,
-				uploadHeaders: {"accessToken":sessionStorage.getItem('accessToken')}
+				uploadHeaders: {
+					"accessToken": sessionStorage.getItem('accessToken')
+				}
 			}
 		},
 		props: {
 			action: {
 				type: String,
-				required: true
+				required: false
 			},
 			fileTypes: {
 				type: Array,
@ -37,17 +39,33 @@
 			}
 		},
 		methods: {
-			onSuccess(res, file) {
-				this.loading && this.loading.close();
-				if (res.code == 200) {
-					this.$emit("success", res.data, file);
-				} else {
-					this.$message.error(res.message);
-					this.$emit("fail", res, file);
+			onFileUpload(file) {
+				// 展示加载条
+				if (this.showLoading) {
+					this.loading = this.$loading({
+						lock: true,
+						text: '正在上传...',
+						spinner: 'el-icon-loading',
+						background: 'rgba(0, 0, 0, 0.7)'
+					});
 				}
-			},
-			onError(err, file) {
-				this.$emit("fail", err, file);
+
+				let formData = new FormData()
+				formData.append('file', file.file)
+				this.$http({
+					url: this.action,
+					data: formData,
+					method: 'post',
+					headers: {
+						'Content-Type': 'multipart/form-data'
+					}
+				}).then((data) => {
+					this.$emit("success", data, file.file);
+				}).catch((e) => {
+					this.$emit("fail", e, file.file);
+				}).finally(() => {
+					this.loading && this.loading.close();
+				})
 			},
 			beforeUpload(file) {
 				// 校验文件类型
@ -64,20 +82,10 @@
 					this.$message.error(`文件大小不能超过 ${this.fileSizeStr}!`);
 					return false;
 				}
-				// 展示加载条
-				if (this.showLoading) {
-					this.loading = this.$loading({
-						lock: true,
-						text: '正在上传...',
-						spinner: 'el-icon-loading',
-						background: 'rgba(0, 0, 0, 0.7)'
-					});
-				}
+
 				this.$emit("before", file);
 				return true;
 			}
-			
-			
 		},
 		computed: {
 			fileSizeStr() {
@ -94,4 +102,4 @@
 </script>

 <style>
-</style>
+</style>
--- a/im-ui/src/components/setting/Setting.vue
+++ b/im-ui/src/components/setting/Setting.vue
@ -93,7 +93,7 @@
 		},
 		computed:{
 			imageAction(){
-				return `${process.env.VUE_APP_BASE_API}/image/upload`;
+				return `/image/upload`;
 			}
 		},
 		watch: {
--- a/im-ui/src/view/Group.vue
+++ b/im-ui/src/view/Group.vue
@ -267,7 +267,7 @@
 				return this.activeGroup.ownerId == this.$store.state.userStore.userInfo.id;
 			},
 			imageAction() {
-				return `${process.env.VUE_APP_BASE_API}/image/upload`;
+				return `/image/upload`;
 			}
 		},
 		mounted() {