chooseImage后只能得到地址,但是我们上传需要拿到二进制文件或者Blob流,请问如何才能拿到?
要获取图片的二进制文件或Blob流,可以使用以下方法:
<input type="file">
标签,可以通过监听change
事件来获取选中的文件。然后使用FileReader对象读取文件内容,将其转换为二进制数据或Blob对象。解析:
<input type="file">
标签添加change
事件监听器readAsDataURL
或readAsArrayBuffer
方法读取文件内容代码示例:
<!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>
fetch
API获取图片数据,然后将其转换为Blob对象。以上传图片为例,可以通过调用钉钉提供的接口来获取文件流。
在钉钉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是否支持跨域访问。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。