javascript - 上传图像二进制文件 - 使用 imageshack api

Question

将主题从 Google 群组移至此处，以便可以帮助提问者。

imageshack API:http://api.imageshack.us/

最终的http请求返回json:

{"success":true,"process_time":325,"result":{"max_filesize":5242880,"space_limit":52428800,"space_used":0,"space_left":52428800,"passed":0,"failed":0,"total":0,"images":[]}}

这不太好，因为它没有上传:(

它应该返回一个图像对象。 http://api.imageshack.us/#h.ws82a1l6pp9g 因为这是 imageshack api 上的上传图像部分的内容

请帮忙:(

我的扩展代码

var blobUrl;
var makeBlob = function () {
        bigcanvas.toBlob(function (blob) {
                var reader = new window.FileReader();
                reader.readAsBinaryString(blob);
                reader.onloadend = function () {
                        blobBinaryString = reader.result;
                        blobUrl = blobBinaryString;
                        Cu.reportError(blobUrl);
                        uploadBlob();
                }
        });
};

var uploadedImageUrl;
var uploadBlob = function () {
        HTTP('POST', 'https://api.imageshack.us/v1/images', {
                contentType: 'application/x-www-form-urlencoded',
                //'album=' + urlencode('Stock History') + '&
                body: 'auth_token=' + urlencode(auth_token) + 'file@=' + blobUrl,
                onSuccess: function (status, responseXML, responseText, headers, statusText) {
                        Cu.reportError('XMLHttpRequest SUCCESS - imageshack uploadBlob\n' + statusText + '\n' + responseText);
                        eval('var json = ' + responseText);
                        uploadedImageUrl = json.direct_link;
                        submitBamdex();
                },
                onFailure: function (status, responseXML, responseText, headers, statusText) {
                        Cu.reportError('XMLHttpRequest FAILLLLLLLL - imageshack uploadBlob\n' + statusText + '\n' + responseText);
                }
        });
};


makeBlob(); //callllll the func

Answer 1

对我有用的是阅读有关

• 本文介绍了 URI、文件、Blob 和 Base64 之间的差异:https://yaz.in/p/blobs-files-and-data-uris/ .
• 正在获取新的 blob:https://masteringjs.io/tutorials/axios/form-data
• 以及更多关闭的标签页

因此，在我的 React 组件 onChange 处理程序中，我使用新的 FileReader 来读取 event.target.files[0]、readAsDataURL(file)，并将 Base64 编码字符串设置为 state。

我有条件地渲染一个 img src={base64stringfromState} 以提供正确图像的确认，然后在提交时，我将此“数据 URI”(Base64 字符串)转换为带有我在某处找到的这两个代码之一的 blob(没有)最终没有使用第一个，但这很有用，并且花了很长时间才找到):

const dataURItoBlob = (dataURI) => {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}

还有

const blob = await fetch(base64imageString).then(res => res.blob())

我们可以在构建照片上传/请求的过程中获取图像的新版本或其他内容，然后将其放在那里，而不是所有这些狗屎:

event.preventDefault()
const blob = await fetch(base64stringfromState).then(res => res.blob())
const formData = new FormData()
formData.append('file@', blob)
formData.append('api_key', 'XXXXX')
formData.append('auth_token', 'XXXXXXXXXX')
formData.append('album', 'youralbumname')
const res = await axios.post('https://api.imageshack.com/v2/images', formData, {headers{'Content-Type':'multipart/form-data'}})

那么我们要存储上传的图像，只需附加 https://并记录返回的直接链接，以便与它的 id 一起存储，以便您以后需要时可以将其删除。根据他们之前的代码，他们在

res.data.result.images[0].direct_link
res.data.result.images[0].id

这是一个很难解决的问题，因此希望这可以帮助其他人将照片上传到 imageshack api，因为考虑到竞争对手的限制，它可能具有很大的值(value)。