# 图片消息

方法说明中并非所有的方法都会写在文档中，具体请前往相关文件查看代码逻辑。

# 使用须知

2020 年 4 月 20 日，发现当发送大小比例比较极端的图片，旧的 base64 获取逻辑 import * as UploadClient from "@/service/updata/init.js"; 会出现 base64 获取异常问题，比如截取长度超过 1200px，高度只有 200px，就会返回大小超过 100kb 的图片 base64 信息。这会导致融云返回-1 错误，致信掉线。影响版本为 3.1.6 之前所有版本。发现这个问题之后，我这边紧急写了一个图片截取逻辑，判断逻辑为，当发现返回的图片 base64 超过 100kb 会对图片进行处理。
只能拿到文件流，不能拿到图片路径的图片都会通过 axios 上传（比如通过剪贴板拿到的图片或者截图，都只能拿到 Base64），不会通过致信的壳进行上传，因为致信壳的上传是通过文件流进行读取然后上传的，需要读取到路径。
NW 获取 base64 和 electron 方法不一致，因为 nw 中不支持 get 方法https://developer.mozilla.org/en-US/docs/Web/API/FormData/get，见 src\lib\base64ToFormdata.js，中base64ToFormdata函数里的注释，这是 3.1.4 之前所有版本都会出现的问题，目前已经修复了。

上面的问题其实都有更好的解决方法，只是没有时间去优化。

问题一的优化方法为重构 base64 获取。
问题二可以重写更优雅的壳的上传逻辑，request 目前是支持 formdata 格式数据上传的。
问题三也可以通过重构的方法去优化。

# 文件位置

TIP

文件位于 src\views\_uc-chat\msg-chat\content-send\send-image\index.js sendImageMessage

# 使用方法

代码可以参考 src\views\_uc-chat\msg-chat\content-send\contentSend.vue

// 引入图片上传模块
import {
  sendImage,
  sendGif,
} from "@/views/_uc-chat/msg-chat/content-send/send-image/index.js";

/**
 * 图片上传
 * @param {*} file 文件
 * @param {*} param1 传 { currentUserInfo, currentChatList }
 * @param {*} time 延时上传时间，一下子加很多文件，没有延时的话会有性能问题，比如选项卡切换不动
 */
sendImage(file, { currentUserInfo, currentChatList }, (time = 0));

# 上传图片依赖文件

import { UCMessage } from "@/control/message/messageSender.js"; 消息发送
import { UC_File } from "@/control/uc-file/ucFile.js"; 文件上传
import * as UploadClient from "@/service/updata/init.js"; 图片 base64 处理
import store from "@/store"; store 获取

# 代码分析

实例化消息体

let Content = {
  content: newBase64, // 图片的base64，大小不能超过100kb，不然致信肯定会掉线
  imageUri: file.path, // 文件路径，截图和粘贴的图片拿不到就留空，
  state: FileStatus.PREUPLOAD, // 图片状态
  extra: JSON.stringify({
    userId: currentUserInfo.memberid,
    userName: currentUserInfo.name,
    toId: currentChatList.targetId,
    toName: currentChatList.conversationTitle,
    from_c: "PC",
    pcMAC: ZX_CLIENT.getMAC(),
  }),
  user: {
    id: currentUserInfo.memberid,
    name: currentUserInfo.name,
    portrait: "",
  },
};
const imageMessage = new UCMessage("ImageMessage", Content);

向页面中添加消息体

imageMessage.preAppend({
  conversationType: currentChatList.conversationType,
  targetId: currentChatList.targetId,
});

实例化图片文件上传并上传

let uploadFile = new UC_File(imageMessage);
uploadFile.upload(file, (status, data) => {
  console.log(status, data);
  if (status == "success") {
    console.log("上传完成后返回的数据", data);
    let fileInfo = JSON.parse(data);
    const fileURL = fileInfo.atts[0].fileUrl;
    imageMessage.content.imageUri = fileURL;
    console.log("格式化上传完成后返回的数据", fileInfo, imageMessage);

    // 上传成功后将图片消息发送出去
    imageMessage.sent({
      conversationType: currentChatList.conversationType,
      targetId: currentChatList.targetId,
      needAppend: false,
    });

    // 修改消息状态
    changeMessageParams(imageMessage, "content", imageMessage.content);
  }
});

← 介绍文件消息 →