使用 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。看来，我必须以某种方式为 Azure 编码或转换来自 reader_evt.target.result 的数据。或者reader.readAsArrayBuffer(evt.target.files[0]); 是错误的方法。但我已经尝试了一切......

有什么想法吗？

Answer 1

知道了：

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

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