如何实现Web API控制器以使用JQuery File Upload接受分块上传? [英] How to Implement a Web API controller to accept chunked uploads using JQuery File Upload?

问题描述

正如标题所述，我需要一些帮助来实现Web API控制器，以使用JQuery File Upload接受分块上载.任何帮助(包括指向现有文章/教程的链接)将不胜感激.

As the title states, I need some help implementing a Web API controller to accept chunked uploads using JQuery File Upload. Any help (including links to existing articles/tutorials) will be much appreciated.

推荐答案

首先让我们从客户端开始. 您必须为分块上传设置 maxChunkSize 选项.之后，每个文件都需要一个唯一的标识符，以便标识服务器上的每个块并将相应的块数据附加到正确的文件中.

First let start with the client side. You must set the maxChunkSize option for chunked uploads. After that you need a unique identifier per file in order to identify each chunk on the server and append the corresponding chunk data to the correct file.

$('#fileupload')
        .bind('fileuploadsubmit', function (e, data) {
            data.headers = $.extend(data.headers,
                {"X-File-Identifier": generateFileUniqueIdentifier(data)})
            });
        });

generateFileUniqueIdentifier = function(data){
    var file=data.files[0],
    var result = file.relativePath||file.webkitRelativePath||file.fileName||file.name;

    return result.replace(/[^0-9a-zA-Z_-]/img,"") + "-" + i.size + "-" + $.now()
} 

现在在服务器端:ApiController

Now on the server side: ApiController

 public class UploadController : ApiController
 {
        [HttpPost]
        [Route("upload/{targetFolder:int}")]
        [ValidateMimeMultipartContentFilter]
        public async Task<IHttpActionResult> UploadDocument(int targetFolder)
        {
            var uploadFileService = new UploadFileService();
            UploadProcessingResult uploadResult = await uploadFileService.HandleRequest(Request);

            if (uploadResult.IsComplete)
            {
                // do other stuff here after file upload complete    
                return Ok();
            }

            return Ok(HttpStatusCode.Continue);

        }
}

实际上传文件的服务类.这支持块或整个文件.

The service class which actually upload the file. This support chunks or a whole file.

public class UploadFileService
{
        private readonly string _uploadPath;
        private readonly MultipartFormDataStreamProvider _streamProvider;

        public UploadFileService()
        {
            _uploadPath = UserLocalPath;
            _streamProvider = new MultipartFormDataStreamProvider(_uploadPath);
        }

        #region Interface

        public async Task<UploadProcessingResult> HandleRequest(HttpRequestMessage request)
        {
            await request.Content.ReadAsMultipartAsync(_streamProvider);
            return await ProcessFile(request);
        }

        #endregion    

        #region Private implementation

        private async Task<UploadProcessingResult> ProcessFile(HttpRequestMessage request)
        {
            if (request.IsChunkUpload())
            {
                return await ProcessChunk(request);
            }

            return new UploadProcessingResult()
            {
                IsComplete = true,
                FileName = OriginalFileName,
                LocalFilePath = LocalFileName,
                FileMetadata = _streamProvider.FormData
            };
        }

        private async Task<UploadProcessingResult> ProcessChunk(HttpRequestMessage request)
        {
            //use the unique identifier sent from client to identify the file
            FileChunkMetaData chunkMetaData = request.GetChunkMetaData();
            string filePath = Path.Combine(_uploadPath, string.Format("{0}.temp", chunkMetaData.ChunkIdentifier));

            //append chunks to construct original file
            using (FileStream fileStream = new FileStream(filePath, FileMode.OpenOrCreate | FileMode.Append))
            {
                var localFileInfo = new FileInfo(LocalFileName);
                var localFileStream = localFileInfo.OpenRead();

                await localFileStream.CopyToAsync(fileStream);
                await fileStream.FlushAsync();

                fileStream.Close();
                localFileStream.Close();

                //delete chunk
                localFileInfo.Delete();
            }

            return new UploadProcessingResult()
            {
                IsComplete = chunkMetaData.IsLastChunk,
                FileName = OriginalFileName,
                LocalFilePath = chunkMetaData.IsLastChunk ? filePath : null,
                FileMetadata = _streamProvider.FormData
            };

        }

        #endregion    

        #region Properties

        private string LocalFileName
        {
            get
            {
                MultipartFileData fileData = _streamProvider.FileData.FirstOrDefault();
                return fileData.LocalFileName;
            }
        }

        private string OriginalFileName
        {
            get
            {
                MultipartFileData fileData = _streamProvider.FileData.FirstOrDefault();
                return fileData.Headers.ContentDisposition.FileName.Replace("\"", string.Empty);
            }
        }

        private string UserLocalPath
        {
            get
            {
               //return the path where you want to upload the file                   
            }
        }

        #endregion    
    }

HttpRequestMessagge 上的扩展用于识别块请求

The extensions over HttpRequestMessagge used to identify a chunk request

public static class HttpRequestMessageExtensions
{
        public static bool IsChunkUpload(this HttpRequestMessage request)
        {
            return request.Content.Headers.ContentRange != null;
        }

        public static FileChunkMetaData GetChunkMetaData(this HttpRequestMessage request)
        {
            return new FileChunkMetaData()
            {
                ChunkIdentifier = request.Headers.Contains("X-DS-Identifier") ? request.Headers.GetValues("X-File-Identifier").FirstOrDefault() : null,
                ChunkStart = request.Content.Headers.ContentRange.From,
                ChunkEnd = request.Content.Headers.ContentRange.To,
                TotalLength = request.Content.Headers.ContentRange.Length
            };
        }
    }

最后是服务响应模型和块元数据

And at the end the service response model and chunk metadata

public class FileChunkMetaData
{
    public string ChunkIdentifier { get; set; }

    public long? ChunkStart { get; set; }

    public long? ChunkEnd { get; set; }

    public long? TotalLength { get; set; }

    public bool IsLastChunk
    {
        get { return ChunkEnd + 1 >= TotalLength; }
    }
}

public class UploadProcessingResult
{
    public bool IsComplete { get; set; }

    public string FileName { get; set; }

    public string LocalFilePath { get; set; }

    public NameValueCollection FileMetadata { get; set; }
}

这篇关于如何实现Web API控制器以使用JQuery File Upload接受分块上传?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！