Kendo UI块上传到Microsoft Azure [英] Kendo UI chunk upload to Microsoft Azure

问题描述

我正在为ASP.Net Core网站项目的附件上传功能实现块上传功能.当前，文件上传是由Kendo UI库处理的，但是当前实现不支持块上传.附件将上传到Azure blob.

I'm implementing the chunk upload functionality for the attachment upload feature of an ASP.Net Core website project. Currently the file upload is handled by the Kendo UI library but the current implementation does not support chunk upload. The attachments will be uploaded to an Azure blob.

我遵循了库提供的示例，但是我的ASP.Net控制器仅接收上载文件的第一个块，这些块不会出现.

I've followed the examples given by the library but my ASP.Net controller receives only the first chunk of the upload file, the chunks are not coming.

斜面:

    $("#xyzUpload").kendoUpload({
    async: {
        saveUrl: fileUploadUrl,
        chunkSize: 1048576,
        removeUrl: "remove",
        autoUpload: true
    },
    multiple: true,
    upload: function (e) {
        e.data = { id: $("#fileUplpderParentObjectId").val() };
    },
    showFileList: false,
    dropZone: ".abc",
    success: onSuccess
});

控制器操作:

 [HttpPost]
    public async Task<JsonResult> ChunkUpload(IEnumerable<IFormFile> files, string metaData, Guid id)
    {
        MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(metaData));

        JsonSerializer serializer = new JsonSerializer();
        ChunkMetaData chunkData;

        var userId = _userManager.GetUserId(User);
        var fileList = new List<GeneralFileViewModel>();

        using (StreamReader streamReader = new StreamReader(ms))
        {
            chunkData = (ChunkMetaData)serializer.Deserialize(streamReader, typeof(ChunkMetaData));
        }

        if (files != null)
        {
            foreach (var file in files)
            {
                var extension = Path.GetExtension(chunkData.FileName);
                var fileName = Path.GetFileNameWithoutExtension(chunkData.FileName);
                var guid = Guid.NewGuid();
                var generalFile = new GeneralFileViewModel()
                {
                    FileId = guid,
                    FileName = fileName,
                    Extension = extension,
                    //FileType = _jobsservice.GetFileType(extension),
                    ParentId = id
                };

                var blockId = Convert.ToBase64String(BitConverter.GetBytes(chunkData.ChunkIndex));

                //Write chunk to azure blob block
                await _uploadService.UploadInBlocksToAzure(blockId, generalFile, file.OpenReadStream());

                //if last chunk is uploaded, commit the blob into azure
                //await _uploadService.CommitBlocksToAzure();

                fileList.Add(generalFile);
            }
        }
        return Json(fileList);
    }

UploadInBlocksToAzure()方法

UploadInBlocksToAzure() method

public async Task UploadInBlocksToAzure(string id, GeneralFileViewModel file, Stream stream)
    {
        try
        {
            var storageAccount = CloudStorageAccount.Parse(_connectionString);
            CloudBlobClient cloudBlobClient = storageAccount.CreateCloudBlobClient();

            var container = cloudBlobClient.GetContainerReference("test-video-in");
            var blob = container.GetBlockBlobReference(file.FileId + file.Extension);
            await blob.PutBlockAsync(id, stream, null);
        }
        catch (Exception e)
        {
            throw;
        }
    }

代码不会引发任何异常.

No exceptions are thrown from the code.

关于为什么action方法不能接收文件的其他块的任何想法?

Any idea on why the action method does not receive the other chunks of the file?

推荐答案

重要的是返回具有上载和fileUid属性的JSON对象，这将通知客户端下一个块应该如下所示- https: //demos.telerik.com/kendo-ui/upload/chunkupload

It is important to return JSON object with the uploaded and fileUid properties, which notifies the client what the next chunk should be as described here - https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/async.chunksize You could also see how it is working correctly in the this demo in the ChunkSave method - https://demos.telerik.com/kendo-ui/upload/chunkupload

这篇关于Kendo UI块上传到Microsoft Azure的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！