使用 Vue 和 Javascript 为聊天应用上传文件图像

Question

目前我正在使用 Sendbird 构建聊天组件，并且由于 Sendbird 不直接支持 Vue，我不得不修改代码以将其与 Vue2.js 一起使用。 我很难将图像上传到聊天中，我想知道你们中的任何人是否可以提供一些建议。

这是 SendbirdAction.js 文件

  sendFileMessage( 
    file,
  ) {
    const fileMessageParams = this.sb.FileMessageParams();
    fileMessageParams.file = file;

    return new Promise((resolve, reject) => { 
      this.channel.sendFileMessage(fileMessageParams, (file, error) => {
      error? reject(error) : resolve(file)
    })
  })
}

这是 MessageInput.vue 文件，它应该在其中处理文件上传。

<template>
  <div>
    <!-- File Upload -->
    <!-- Photo -->
    <!-- Emoji -->
    <textarea
      placeholder="your message..."
      v-model="message"
      @keydown.enter.exact.prevent="sendMessage"
    />
    <input 
    id ="files"
    ref="files" 
    type="file"
    multiple 
    @change= "handleFilesUpload"
/>
    <button v-if="message" @click="handleFilesUpload">Send</button>
  </div>
</template>

<script>
import { SendbirdAction } from '@/sendbird/SendbirdAction'

export default {
  name: 'MessageInput',
  data() {
    return {
      message: '',
    }
  },
  methods: {
    sendMessage: function (event) {
      if (event.isComposing) {
        return
      }
      SendbirdAction.getInstance()
        .sendUserMessage(this.message)
        .then((message) => {
          this.$emit('addInputMessage', message)
          this.message = ''
        })
    },

     handleFilesUpload: function (event) {
      const sendFile = event.target.files[0]
      console.log(event.target.files[0]);
      SendbirdAction.getInstance()
      .sendFileMessage(sendFile)
        .then((message) => {
          this.$emit('addInputFile', message)
          this.message = sendFile
        })
    },
  },
  
}
</script>

这是 MessageLog.vue，它以聊天格式显示消息和文件。

<template>
  <div class="message-log">
    <ul v-if="msg.itemList.length > 0">
      <li
        class="chat-item"
        v-for="message in msg.itemList"
        :key="message.messageId"
      >
        <p>{{ message.sender.nickname }}</p>
        <div style="white-space: pre-wrap">{{ message.message }}</div>
        <p>{{ convertDate(message.createdAt) }}</p>
      </li>
    </ul>
  </div>
</template>

到目前为止，我可以选择文件，一旦我使用 console.log(event.target.files[0])，它就会在控制台上显示文件名和日期。 但是，我不知道如何将其上传到聊天记录。 如果有人可以帮助我，我将不胜感激。

Answer 1

免责声明：我是 Sendbird 员工

这里有一些缺乏信息，这使得这个问题有点难以解决，但我会尽力用你提供的东西。

通常，当我们看到这种类型的问题时，其原因是传递给params.file的数据。 但是，由于您没有包含有关返回的任何错误的任何信息，因此我只能做出假设。

我对 Vue 并不熟悉，但我在 CodeSandbox 上整理了一个快速示例，您可以在其中将文件上传到频道。 只需更新以下变量： APP_ID 、 USER_ID 、 CHANNEL_URL 。

示例链接： https://codesandbox.io/s/rough-vue-sendbird-example-8rmher

如果您有后续问题，我建议您前往Sendbird 社区，我们有更广泛的团队可以尝试提供帮助。