Browse Source

支持输入框粘贴图片

master
xie.bx 2 years ago
parent
commit
fdf6f5cebe
  1. 17
      im-ui/src/components/chat/ChatBox.vue
  2. 9
      im-ui/src/store/chatStore.js
  3. 2
      im-uniapp/components/chat-message-item/chat-message-item.vue

17
im-ui/src/components/chat/ChatBox.vue

@ -48,7 +48,7 @@
<div class="send-content-area">
<textarea v-show="!sendImageUrl" v-model="sendText" ref="sendBox" class="send-text-area"
:disabled="lockMessage" @keydown.enter="sendTextMessage()" @paste="handlePaste"
placeholder="聊点什么吧~"></textarea>
placeholder="温馨提示:可以粘贴截图了哦~"></textarea>
<div v-show="sendImageUrl" class="send-image-area">
<div class="send-image-box">
@ -120,6 +120,7 @@
},
methods: {
handlePaste(e) {
console.log(e);
let txt = event.clipboardData.getData('Text')
if (typeof(txt) == 'string') {
this.sendText += txt
@ -308,21 +309,23 @@
}
},
sendImageMessage() {
let file = this.sendImageFile;
this.handleImageBefore(this.sendImageFile);
let formData = new FormData()
formData.append('file', this.sendImageFile.raw || this.sendImageFile)
formData.append('file', file.raw || file)
this.$http.post("/image/upload", formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((data) => {
this.handleImageSuccess(data, this.sendImageFile);
this.handleImageSuccess(data, file);
}).catch((res) => {
this.handleImageSuccess(res, this.sendImageFile);
}).finally(() => {
this.handleImageSuccess(res, file);
})
this.sendImageFile = null;
this.sendImageUrl= ""
});
this.sendImageUrl= "";
this.$nextTick(() => this.$refs.sendBox.focus());
this.scrollToBottom();
},
sendTextMessage() {
if (!this.sendText.trim()) {

9
im-ui/src/store/chatStore.js

@ -8,7 +8,14 @@ export default {
mutations: {
initChatStore(state) {
// 防止图片一直处在加载中状态
state.chats.forEach((chat)=>{
chat.messages.forEach((msg)=>{
if(msg.loadStatus == "loading"){
msg.loadStatus = "fail"
}
})
})
},
openChat(state, chatInfo) {
let chat = null;

2
im-uniapp/components/chat-message-item/chat-message-item.vue

@ -137,7 +137,7 @@
return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
},
loadFail() {
return this.msgInfo.loadStatus && (this.msgInfo.loadStatus === "fail");
return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
},
data() {
return JSON.parse(this.msgInfo.content)

Loading…
Cancel
Save