返回

h5端使用uni-app接入腾讯IM，如何正确创建图片对象？

前端

问题

在uni-app中，使用h5端接入腾讯IM时，在创建图片对象时，可能会遇到以下提示：

file传入的值必须是dom或file对象

问题分析

出现这个问题的原因是，在创建图片对象时，传入的file参数必须是DOM元素或File对象。如果传入的值不是DOM元素或File对象，就会出现上述提示。

在uni-app中，通过wx.chooseImage接口选择图片后，得到的tempFiles是一个临时文件列表，其中包含了所选图片的临时路径。这些临时路径并不是DOM元素或File对象，因此不能直接传入图片对象。

解决方案

为了解决这个问题，需要将tempFiles中的临时路径转换为DOM元素或File对象。可以使用以下方法之一：

  1. 使用FileReader将临时路径转换为File对象。
  2. 使用URL.createObjectURL()方法将临时路径转换为DOM元素。

下面分别介绍这两种方法：

1. 使用FileReader将临时路径转换为File对象

const tempFilePath = tempFiles[0].path;

const reader = new FileReader();

reader.onload = function (e) {
  const file = new File([e.target.result], tempFilePath);

  // 使用file创建图片对象
};

reader.readAsArrayBuffer(tempFilePath);

2. 使用URL.createObjectURL()方法将临时路径转换为DOM元素

const tempFilePath = tempFiles[0].path;

const objectURL = URL.createObjectURL(tempFilePath);

// 使用objectURL创建图片对象

总结

在uni-app中，使用h5端接入腾讯IM时，创建图片对象时，需要将tempFiles中的临时路径转换为DOM元素或File对象。可以使用FileReader或URL.createObjectURL()方法来实现。

参考资料

进一步阅读