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

<template>
  <div class="emojiRoot">
    <div @click="()=>photoActionsSelect(0)" 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="()=>photoActionsSelect(1)" 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="videoImg"></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,useUploadsStore } from '@/store'
import { useSessionMenu } from '@/hooks'
import photoAlbum from '@/static/image/chatList/photoAlbum.png'
import photoGraph from '@/static/image/chatList/photoGraph.png'
import videoImg from '@/static/image/chatList/video@2x.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
  },
  talkParams: {
    type: Object,
    default: {},
    required: true
  }
});

const uploadsStore = useUploadsStore()
const { addDialogueRecord, virtualList, updateUploadProgress } = useDialogueListStore()
const dialogueStore = useDialogueStore()
const userStore = useUserStore()

const emit = defineEmits(['selectImg'])

const onProgressFn = (progress, id) => {
  console.log(progress.loaded / progress.total * 100, 'progress');

  updateUploadProgress(id, progress.loaded / progress.total * 100)
}

const photoActionsSelect = (index) => {
  if (index === 0) {
    uni.chooseImage({
      sourceType: ['album'],
      count: 9,
      success: async (res) => {
        console.log(res,'res');
        res.tempFiles.forEach(async (file) => {
          let data = await onUploadImageVideo(file, 'image')
          emit('selectImg', data)
        })
      }
    })
  }else{
    uni.chooseVideo({
      sourceType: ['album'],
      success: async (res) => {
        console.log(res,'res');
        let data = await onUploadImageVideo(res.tempFile, 'video',res.tempFilePath)
        emit('selectImg', data)
      }
    })
  }

}

const onUploadImageVideo = async (file, type = 'image',fileUrl) => {
  console.log(file, 'file');
  return new Promise(async (resolve) => {
    if (type === 'image') {
      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()
        let newItem = {
          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,
          uploadStatus: 1,  // 1 上传中 2 上传成功 3 上传失败
        }

        virtualList.value.unshift(newItem)
        uploadImg(form, (e) => onProgressFn(e, randomId)).then(({ status, data, msg }) => {
          if (status == 0) {
            resolve({
              type: 'image',
              url: data.ori_url,
              size: file.size,
              width: image.width,
              height: image.height
            })
          } else {
            resolve('')
            message.error(msg)
          }
        })
      }
    } else {
      uni.getVideoInfo({
        src:fileUrl,
        success:(resp)=>{
        console.log(resp);
        form.append('file', file)
        form.append("source", "fonchain-chat");
        form.append("type", "video");
        form.append("urlParam", `width=${resp.width}&height=${resp.height}`);
        let randomId = uniqueId()
        let newItem = {
          avatar: userStore.avatar,
          created_at: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          extra: {
            duration: parseInt(resp.duration),
            height: resp.height,
            name: "",
            url: fileUrl,
            width: resp.width
          },
          float: "right",
          isCheck: false,
          is_mark: 0,
          is_read: 0,
          is_revoke: 0,
          msg_id: randomId,
          msg_type: 5,
          nickname: userStore.nickname,
          receiver_id: dialogueStore.talk.receiver_id,
          sequence: -1,
          talk_type: dialogueStore.talk.talk_type,
          user_id: userStore.uid,
          uploadCurrent: 0,
          uploadStatus: 1,  // 1 上传中 2 上传成功 3 上传失败
        }
        virtualList.value.unshift(newItem)
        uploadImg(form, (e) => onProgressFn(e, randomId)).then(({ status, data, msg }) => {
          if (status == 0) {
            console.log(data);
            resolve({
              type: 'video',
              url: data.ori_url,
              cover: data.cover_url,
              duration: parseInt(resp.duration),
              size: file.size
            })
          } else {
            // resolve('')
            // message.error(msg)
          }
        })
        }
      })
      const form = new FormData()
    }
  })
}

const base64ToFile = (base64) => {
  // base64转file
  const [header, base64String] = base64.split(";base64,");
  const imageType = header.split(":")[1];
  const byteCharacters = atob(base64String);
  const byteArray = new Uint8Array(
    Array.from(byteCharacters, (char) => char.charCodeAt(0))
  );
  return new File(
    [new Blob([byteArray], { type: imageType })],
    "example.png",
    { type: imageType }
  );
}

const choosePhoto = (filter = 'none', maximum = 9, multiple = true) => {
  window.plus?.gallery.pick((res) => {
    console.log(res);
    res.files.reverse()
    res.files.forEach(async (filePath) => {
      const suffix = filePath.split('.').pop()?.toLowerCase() || ''
      if (['jpg', 'png'].includes(suffix)) {
        console.log("进入图片")
        window.plus?.io?.resolveLocalFileSystemURL(filePath, async (entry) => {
          entry.file((file) => {
            const fileReader = new plus.io.FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onloadend = async (e) => {
              const base64Url = e.target.result;
              const fileObj = base64ToFile(base64Url);
              let data = await onUploadImageVideo(fileObj, 'image')
              emit('selectImg', data)
            };
          })
        },
          (err) => {
            console.log(err);
          }
        )
      }
      if (['mp4', 'flv'].includes(suffix)) {
        console.log(filePath,"进入视频")
        // const localUrl = plus.io.convertLocalFileSystemURL(filePath)
        // console.log(localUrl);

        plus.io.getVideoInfo({
          filePath:filePath,
          success:(event)=>{
          console.log(event);
        },
        fail:(err)=>{
          console.log(err);
        }
        });
        // window.plus?.io?.resolveLocalFileSystemURL(localUrl, async (entry) => {
        //   entry.file((file) => {
        //     console.log(file,'file');
        //     const fileReader = new plus.io.FileReader();
        //     fileReader.readAsDataURL(file);
        //     fileReader.onloadend = async (e) => {
        //       const base64Url = e.target.result;
        //       const fileObj = base64ToFile(base64Url);
        //       let data = await onUploadImageVideo(fileObj, 'video')
        //       emit('selectImg', data)
        //     };
        //   })
        // },
        //   (err) => {
        //     console.log(err);
        //   }
        // )
      }
    })
  }, (err) => {
    console.log(err);
  },
    {
      filter: filter,
      maximum: maximum,
      multiple: multiple,
    }
  )
}



const takePhoto = () => {

}
const chooseFile = () => {
  uni.chooseFile({
    count: 1,
    extension:[''],
    success: (res) => {
      let randomId = uniqueId()
        let newItem = {
          avatar: userStore.avatar,
          created_at: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          extra: {
            drive: 3,
            name: res.tempFiles[0].name,
            size: res.tempFiles[0].size,
            path: res.tempFilePaths[0],
          },
          float: "right",
          isCheck: false,
          is_mark: 0,
          is_read: 0,
          is_revoke: 0,
          msg_id: randomId,
          msg_type: 6,
          nickname: userStore.nickname,
          receiver_id: dialogueStore.talk.receiver_id,
          sequence: -1,
          talk_type: dialogueStore.talk.talk_type,
          user_id: userStore.uid,
          uploadCurrent: 0,
          uploadStatus: 1,  // 1 上传中 2 上传成功 3 上传失败
        }
      virtualList.value.unshift(newItem)
      uploadsStore.initUploadFile(res.tempFiles[0], props.talkParams,randomId)
    }
  })
}



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