钉钉H5微应用chooseImage后如何拿到file文件流

chooseImage后只能得到地址，但是我们上传需要拿到二进制文件或者Blob流，请问如何才能拿到？

展开

收起

尛铭哥哥 2023-12-18 10:01:47 319 0

3 条回答

写回答

取消提交回答

小周sir

面对过去，不要迷离；面对未来，不必彷徨；活在今天，你只要把自己完全展示给别人看。

要获取图片的二进制文件或Blob流，可以使用以下方法：

如果你使用的是HTML5的<input type="file">标签，可以通过监听change事件来获取选中的文件。然后使用FileReader对象读取文件内容，将其转换为二进制数据或Blob对象。

解析：

创建一个FileReader对象
为<input type="file">标签添加change事件监听器
在事件处理函数中，获取选中的文件
使用FileReader对象的readAsDataURL或readAsArrayBuffer方法读取文件内容
将读取到的数据转换为二进制数据或Blob对象

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取图片二进制数据</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            const reader = new FileReader();
            reader.onload = (e) => {
                const binaryData = e.target.result; // 或者 const binaryData = new Blob([e.target.result], {type: 'image/jpeg'});
                console.log(binaryData);
            };
            reader.readAsDataURL(file); // 或者 reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>

如果你使用的是其他编程语言（如JavaScript、Python等），可以根据具体语言的库和方法来实现。例如，在JavaScript中，可以使用fetch API获取图片数据，然后将其转换为Blob对象。

2023-12-18 14:19:43

赞同展开评论打赏

nanana~~

是个只会写bug的程序媛啊！！！
以上传图片为例，可以通过调用钉钉提供的接口来获取文件流。
1. 调用chooseImage接口：在页面中添加一个按钮或链接，点击后调用chooseImage接口，弹出选择图片的对话框。
2. 用户选择图片：用户在对话框中选择一张图片，点击确定。
3. 获取文件流：在chooseImage接口的回调函数中，可以获取到选择的图片的文件流。
2023-12-18 11:48:15

赞同展开评论打赏

听风de歌

在钉钉H5微应用中，chooseImage API通常会返回一个图片的URL或者临时路径。如果你需要将这个图片转换为二进制文件或Blob流，可以按照以下步骤进行：

使用fetch或XMLHttpRequest来获取图片数据。

以下是一个使用fetch的例子：

async function getImageBlob(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Failed to fetch image');
  }
  return response.blob();
}

// 使用chooseImage获取图片地址
dd.chooseImage({
  count: 1,
  success(result) {
    const imageUrl = result.tempFiles[0].url;
    getImageBlob(imageUrl)
      .then(blob => {
        // 处理Blob对象
        console.log('Blob:', blob);
        // 可以在这里将Blob上传到服务器
      })
      .catch(error => {
        console.error('Error fetching image:', error);
      });
  },
  fail(error) {
    console.error('Choose image failed:', error);
  },
});

如果你不能直接使用fetch或XMLHttpRequest（例如在某些不支持这些API的环境中），你可以创建一个img元素，然后使用canvas来获取图片的Blob。

以下是一个使用canvas的例子：

function getImageBlob(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      canvas.toBlob(resolve, 'image/jpeg');
    };
    img.onerror = reject;
    img.src = url;
  });
}

// 使用chooseImage获取图片地址
dd.chooseImage({
  count: 1,
  success(result) {
    const imageUrl = result.tempFiles[0].url;
    getImageBlob(imageUrl)
      .then(blob => {
        // 处理Blob对象
        console.log('Blob:', blob);
        // 可以在这里将Blob上传到服务器
      })
      .catch(error => {
        console.error('Error fetching image:', error);
      });
  },
  fail(error) {
    console.error('Choose image failed:', error);
  },
});

以上两种方法都可以将图片URL转换为Blob对象，然后你可以将这个Blob对象上传到服务器。注意，由于浏览器安全策略（CORS），你可能需要确保你的图片源允许跨域访问。如果遇到问题，检查你的图片URL是否支持跨域访问。

2023-12-18 10:13:12

赞同 2 展开评论打赏

钉钉H5微应用chooseImage后如何拿到file文件流

相关电子书

相关实验场景

钉钉H5微应用chooseImage后如何拿到file文件流

相关文章

相关电子书

相关实验场景