钉钉H5微应用chooseImage后如何拿到file文件流
chooseImage后只能得到地址，但是我们上传需要拿到二进制文件或者Blob流，请问如何才能拿到？
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
3
条回答
写回答
-
面对过去，不要迷离；面对未来，不必彷徨；活在今天，你只要把自己完全展示给别人看。
要获取图片的二进制文件或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中，可以使用
fetchAPI获取图片数据，然后将其转换为Blob对象。
2023-12-18 14:19:43赞同 展开评论 - 如果你使用的是HTML5的
-
是个只会写bug的程序媛啊！！！
以上传图片为例，可以通过调用钉钉提供的接口来获取文件流。
- 调用chooseImage接口：在页面中添加一个按钮或链接，点击后调用chooseImage接口，弹出选择图片的对话框。
- 用户选择图片：用户在对话框中选择一张图片，点击确定。
- 获取文件流：在chooseImage接口的回调函数中，可以获取到选择的图片的文件流。
2023-12-18 11:48:15赞同 展开评论 -
在钉钉H5微应用中，
chooseImageAPI通常会返回一个图片的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 展开评论 - 使用
相关问答