javascript - 使用 Javascript 将图像上传到 Azure Blob 存储

Question

我想在我的 HTML5 网页上选择一个带有 Input type="file" 的图像文件并使用 jQuery 或纯 JavaScript 将其发送到我的 Azure BlobStorage(使用 SAS 保护)。

网上有一些如何执行此操作的示例。到目前为止，我已经处理了我需要的一切:创建 SAS、使用 SAS 和 CORS 将 PUT 发送到 BlobStorage。我的镜像是在 BlobStorage 中创建的。但是:我在 Azure 上的文件长度为 0。

由于我的代码到目前为止正在运行，它在云中创建了一个“空”文件，所以我现在的问题是，如何向它发送正确的数据。

这是我提交的内容:

f_UploadSelectedHandler(evt) {
    var reader = new FileReader();
    reader.onloadend = function (reader_evt) {
        // Here are my tries:
        var mByteArray = reader_evt.target.result;
        //var mByteArray = new Uint8Array(reader_evt.target.result);
        //var mFileData = '';
        //for (var i = 0; i < mByteArray.byteLength; i++) {
        //    mFileData += String.fromCharCode(mByteArray[i]);
        //}
        $.ajax({
            url: mSAS_URL,
            type: "PUT",
            //data: mFileData,
            data: mByteArray,
            headers: {
                "x-ms-blob-type": "BlockBlob",
                "x-ms-date": (new Date()).toUTCString(),
                "Content-Type": mSelectedFileContentType
            },
            success: function (data) {
                alert("done");
            },
            error: function (e, y, s) {
                alert("error");
            }
        })
    }
    reader.readAsArrayBuffer(evt.target.files[0]);
}

如果我使用var mByteArray = reader_evt.target.result;上传的文件大小为0。

如果我使用var mByteArray = new Uint8Array(reader_evt.target.result);上传的文件已损坏。

如果我使用var mFileData = ''; for (var i = 0; i < mByteArray.byteLength; i++) { mFileData += String.fromCharCode(mByteArray[i]); }上传的文件已损坏。

我在网上找到的每个示例都使用最简单的方法:

• 使用以下命令初始化所有内容:reader.readAsArrayBuffer(evt.target.files[0]);
• 为ajax输入数据:reader_evt.target.result

但是我的文件是0。看来我必须对reader_evt.target.result中的数据进行编码或转换以某种方式为 Azure 服务。或者reader.readAsArrayBuffer(evt.target.files[0]);是方法错误。但我已经尝试了一切...

有什么想法吗？

Answer 1

明白了:

$.ajax({
    url: blobSasUrl,
    type: "PUT",
    data: fileDataAsArrayBuffer,
    processData: false,
    :
    :

最后一行是缺失的链接。我必须对 jQuery 说，让数据保持原样...