chat-app/src/pages/dialog/components/filePanel.vue

<template>
  <div class="emojiRoot">
    <div @click="choosePhoto" class="flex flex-col items-center">
      <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center">
        <tm-image :width="53" :height="44" :src="photoAlbum"></tm-image>
      </div>
      <div class="mt-[6rpx] text-[#666666] text-[24rpx]">照片</div>
    </div>
    <div @click="takePhoto" class="flex flex-col items-center">
      <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center">
        <tm-image :width="53" :height="44" :src="photoGraph"></tm-image>
      </div>
      <div class="mt-[6rpx] text-[#666666] text-[24rpx]">拍摄</div>
    </div>
    <div @click="chooseFile" class="flex flex-col items-center">
      <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center">
        <tm-image :width="53" :height="44" :src="folder"></tm-image>
      </div>
      <div class="mt-[6rpx] text-[#666666] text-[24rpx]">文件</div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits } from "vue"
import dayjs from "dayjs";
import { beautifyTime } from '@/utils/datetime'
import { useDialogueListStore, useDialogueStore, useUserStore } from '@/store'
import { useSessionMenu } from '@/hooks'
import photoAlbum from '@/static/image/chatList/photoAlbum.png'
import photoGraph from '@/static/image/chatList/photoGraph.png'
import folder from '@/static/image/chatList/folder.png'
import { uploadImg } from '@/api/chat'
import { uniqueId } from '@/utils'

const props = defineProps({
  sendUserInfo: {
    type: Object,
    default: {},
    required: true
  }
});

const dialogueListStore = useDialogueListStore()
const dialogueStore = useDialogueStore()
const userStore = useUserStore()

const emit = defineEmits(['selectImg','updateUploadProgress'])

const onProgressFn = (progress, file,id) => {
  emit('updateUploadProgress', id, progress.loaded / progress.total * 100)
}

const onUploadImage = (file) => {
  return new Promise((resolve) => {
    let image = new Image()
    image.src = URL.createObjectURL(file)
    image.onload = () => {
      const form = new FormData()
      form.append('file', file)
      form.append("source", "fonchain-chat");
      form.append("urlParam", `width=${image.width}&height=${image.height}`);
      let randomId = uniqueId()
      dialogueListStore.addDialogueRecord([
        {
          avatar: userStore.avatar,
          created_at: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          extra: {
            height: image.height,
            name: "",
            size: 0,
            url: image.src,
            width: image.width
          },
          float: "right",
          isCheck: false,
          is_mark: 0,
          is_read: 0,
          is_revoke: 0,
          msg_id: randomId,
          msg_type: 3,
          nickname: userStore.nickname,
          receiver_id: dialogueStore.talk.receiver_id,
          sequence: -1,
          talk_type: dialogueStore.talk.talk_type,
          user_id: userStore.uid,
          uploadCurrent: 0
        }
      ], 'add')

      uploadImg(form, (e, file) => onProgressFn(e, file, randomId)).then(({ status, data, msg }) => {
        if (status == 0) {
          // message.success('上传成功')
          resolve({
            url: data.ori_url,
            size: file.size,
            width: image.width,
            height: image.height
          })
        } else {
          resolve('')
          message.error(msg)
        }
      })
    }
  })
}

const choosePhoto = () => {
  uni.chooseImage({
    sourceType: ['album'],
    success: async (res) => {
      console.log(res.tempFiles);
      res.tempFiles.forEach(async item => {
        if (item.type.indexOf('image/') === 0) {
          console.log("进入图片")
          let data = await onUploadImage(item)
          return false;
          emit('selectImg', data)
          // if (src) {
          //   quill.insertEmbed(index, 'image', src)
          //   quill.setSelection(index + 1)
          // }
          return
        }

        if (item.type.indexOf('video/') === 0) {
          console.log("进入视频")
          let fn = emitCall('video_event', item, () => { })
          emit('editor-event', fn)
        }
      })

    },
    fail: (err) => {
      console.log(err);

      message.error(err)
    }
  })
}
const takePhoto = () => {

}
const chooseFile = () => {

}



</script>
<style lang="scss" scoped>
.emojiRoot {
  width: 100%;
  height: 232rpx;
  padding: 20rpx 130rpx 0 130rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
</style>