Question

我想用Input type="file"在我的HTML5网页上选择一个图像文件，然后用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说，让数据保持原样......

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

1 个答案: