上传的文件大小相同，上传时为15B。我正在使用 JQuery 和 azure-storage-blob.min.js 版本 12 将文件上传到 az

Question

我正在尝试使用 jquery 将文件上传到 Blob 容器，并且我使用的是 azure-storage-blob.min.js 版本 12。下面是我的代码。这里 fileToBeUploaded 是一个 json 对象，具有大小、名称、ContentType 等属性。

uploadFileToAzure: function () {
        var fileToBeUploaded = UPLOAD.DESTINATION_FILE_CONFIGURATION;            
        if (fileToBeUploaded != null && fileToBeUploaded.length > 0) {

            $.each(fileToBeUploaded, function (index, value) {
                const container = new azblob.ContainerURL(value.Url, azblob.StorageURL.newPipeline(new azblob.AnonymousCredential));
                try {
                    UPLOAD.log('sendFile');
                    $('form :input').attr('disabled', true);                       
                    const blobOptions = {
                        blobHTTPHeaders: { blobContentType: value.ContentType },
                    };
                    const blockBlobURL = azblob.BlockBlobURL.fromContainerURL(container, value.Key);
                    var result = azblob.uploadBrowserDataToBlockBlob(
                        azblob.Aborter.none, value, blockBlobURL, blobOptions);

                    result.then(function (result) {
                        alert("Done");
                        return true;
                    }, function (err) {
                        alert("Error");
                        console.log(err);
                        return false;
                    });


                } catch (error) {
                    alert(error);
                    return false;
                }
            });
        }
    }

fileToBeUploaded（使用下面的fileToBeUploaded对象-->我收到404错误。此错误意味着服务器上不存在该文件或目录。）

fileToBeUploaded[0]
e {id: 'o_1frjmofms1afu1ii2u4pc0c12kdj', name: 'Sample.ppt', type: 'application/vnd.ms-powerpoint', relativePath: '', size: 85504, …}
completeTimestamp: 0
destroy: ƒ ()
getNative: ƒ ()
getSource: ƒ ()
id: "o_1frjmofms1afu1ii2u4pc0c12kdj"
lastModifiedDate: Fri Oct 29 2021 12:34:13 GMT+0530 (India Standard Time) {}
loaded: 0
name: "Sample.ppt"
origSize: 85504
percent: 0
relativePath: ""
size: 85504
status: 1
type: "application/vnd.ms-powerpoint"
[[Prototype]]: Object

fileToBeUploaded2（使用下面的fileToBeUploaded2对象-->我可以将文件上传到azure，但文件大小为15B，并且所有文件都会发生这种情况。当我尝试下载这些文件时，它们已损坏）

fileToBeUploaded2[0]
{Policy: null, Signature: null, Bucket: null, Key: 'xxxx/xxxx/xxxx/xxxxx/a67d27a4-b50c-40de-9818-bc5d5bb37b08.pdf', FileName: 'pdf-sample.pdf', …}
AccessKey: null
Acl: null
AmzAlgorithm: null
AmzCredentials: null
AmzDate: null
Bucket: null
ContentType: "application/pdf"
ExternalId: "2939"
FileName: "pdf-sample.pdf"
Key: "xxx/xxx/xxx/xxxx/a67d27a4-b50c-40de-9818-bc5d5bb37b08.pdf"
MediaUrl: null
ModuleId: 0
Policy: null
Signature: null
Type: 0
Url: "https://xxxxxx.blob.core.windows.net/xxxxxx?sv=2020-08-04&se=2022-02-12T07%3A14%3A34Z&sr=c&sp=w&sig=xxxxx"
UserAgent: null
size: 22260
[[Prototype]]: Object

我的问题是，当我尝试将任何文件上传到天蓝色时，文件大小保持不变。我通过进入门户并检查我通过 jquery 上传的每个文件来确认这一点。文件大小为 15B，当我尝试打开任何文件时，它已损坏。我的上传和下载没有任何问题。 我唯一的问题是，一旦上传，文件就会损坏。

Answer 1

我认为您尝试上传文件对象而不是文件。那发生在我身上。然后我意识到我尝试上传文件而不是file.file。我已经创建了名为 file 的对象，但我忘记调用正确的密钥。

 const uploadPromises = documents.map(async (file) => {
    try {
      const blockBlobClient = containerClient.getBlockBlobClient(file.name);
      await blockBlobClient.uploadData(file.file, {
        blobHTTPHeaders: { blobContentType: file.type },
        concurrency: 20,
        blockSize: 4 * 1024 * 1024, // 4MB chunks
        onProgress: (progress) => {
          console.log(
            `${file.name}: ${progress.loadedBytes}/${file.size} bytes`
          );
          setUploadProgress((prev) => ({
            ...prev,
            [file.name]: Math.floor(
              (progress.loadedBytes / file.size) * 100
            ),
          }));
        },
      });
      // Verify uploaded size
      const properties = await blockBlobClient.getProperties();
      console.log(
        `Uploaded size for ${file.name}: ${properties.contentLength} bytes`
      );

      return {
        fileName: file.name,
        success: properties.contentLength === file.size,
      };
    } catch (error) {
      console.error(`Error uploading ${file.name}:`, error);
      return { fileName: file.name, success: false };
    }
  });

请参阅以下几行

以前是这样的

          await blockBlobClient.uploadData(file, {

修复后

          await blockBlobClient.uploadData(file.file, {