开发者社区> 问答> 正文

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

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

展开
收起
尛铭哥哥 2023-12-18 10:01:47 349 0
3 条回答
写回答
取消 提交回答
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

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

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

    解析:

    • 创建一个FileReader对象
    • <input type="file">标签添加change事件监听器
    • 在事件处理函数中,获取选中的文件
    • 使用FileReader对象的readAsDataURLreadAsArrayBuffer方法读取文件内容
    • 将读取到的数据转换为二进制数据或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>
    
    1. 如果你使用的是其他编程语言(如JavaScript、Python等),可以根据具体语言的库和方法来实现。例如,在JavaScript中,可以使用fetch API获取图片数据,然后将其转换为Blob对象。
    2023-12-18 14:19:43
    赞同 展开评论 打赏
  • 是个只会写bug的程序媛啊!!!

    以上传图片为例,可以通过调用钉钉提供的接口来获取文件流。

    1. 调用chooseImage接口:在页面中添加一个按钮或链接,点击后调用chooseImage接口,弹出选择图片的对话框。
    2. 用户选择图片:用户在对话框中选择一张图片,点击确定。
    3. 获取文件流:在chooseImage接口的回调函数中,可以获取到选择的图片的文件流。
    2023-12-18 11:48:15
    赞同 展开评论 打赏
  • 在钉钉H5微应用中,chooseImage API通常会返回一个图片的URL或者临时路径。如果你需要将这个图片转换为二进制文件或Blob流,可以按照以下步骤进行:

    1. 使用fetchXMLHttpRequest来获取图片数据。

    以下是一个使用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);
      },
    });
    
    1. 如果你不能直接使用fetchXMLHttpRequest(例如在某些不支持这些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是否支持跨域访问。
    image.png

    2023-12-18 10:13:12
    赞同 2 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
钉钉小程序——为工作方式插上翅膀 立即下载
钉钉客户端自动化的应用 立即下载
使命必达 —— 钉钉企业级 消息服务的机遇与挑战 立即下载