Question

我尝试将插件blueimp放到我的Asp.Net MVC应用程序中。我的上传目标大约是1GB。如何处理服务器端的块文件上传文件？

Answer 1

我想你的意思是来自blueimp的FileUpload jquery模块。这就是我在项目中处理它的方式。我上传的大型图片不超过30MB。所以这个例子仅仅是代码，而不是你需要处理1GB文件的事实。

这是javascript代码的一部分。没什么特别的。我只是按照FileUpload文档和示例。我只发送了几个属性（包括AntiforgeryToken） - 这些都不是正确行为所必需的。

$("#file-upload").fileupload({
    url: 'upload-file',
    dataType: 'json',
    autoUpload: false,
    maxChunkSize: 5000000,
    progressInterval: 1000,
    bitrateInterval: 1000
}).on('fileuploadadd', function (e, data) {
    fileData = data; // save data to be able to submit them later

    if (window.File && window.Blob) {
        // update form data
        data.formData = {
            uploadFolder: '/upload-folder/some-guid',
            __RequestVerificationToken: $("#upload-form").find('input[name=__RequestVerificationToken]').val()
        };
    } else {
        // chunk upload not supported
    }
});

$("#file-submit").on('click', function (e) {
    e.preventDefault();
    fileData.submit();
});

在服务器端，我有一个模型类：

public class UploadViewRequest
{
    public Guid UploadFolder { get; set; }
    public bool IsChunk { get; set; }
    public int ChunkNumber { get; set; }
    public bool IsFirst { get; set; }
    public bool IsLast { get; set; }
    public HttpPostedFileBase OriginalFile { get; set; }
    public bool JsonAccepted { get; set; }
}

我为这个类编写了一个自定义模型绑定器，这样我就可以看到它是整个文件还是只是一个块，如果是，那么我要处理的文件的哪个部分：

public class UploadViewRequestBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        UploadViewRequest model = base.BindModel(controllerContext, bindingContext) as UploadViewRequest;

        string rangeHeader = controllerContext.HttpContext.Request.Headers["Content-Range"];
        if (string.IsNullOrEmpty(rangeHeader))
            model.IsChunk = false;
        else
        {
            model.IsChunk = true;

            Match match = Regex.Match(rangeHeader, "^bytes ([\\d]+)-([\\d]+)\\/([\\d]+)$", RegexOptions.IgnoreCase);
            int bytesFrom = int.Parse(match.Groups[1].Value);
            int bytesTo = int.Parse(match.Groups[2].Value);
            int bytesFull = int.Parse(match.Groups[3].Value);

            if (bytesTo == bytesFull)
                model.IsLast = true;
            else
                model.IsLast = false;

            if (bytesFrom == 0)
            {
                model.ChunkNumber = 1;
                model.IsFirst = true;
            }
            else
            {
                int bytesSize = bytesTo - bytesFrom + 1;
                model.ChunkNumber = (bytesFrom / bytesSize) + 1;
                model.IsFirst = false;
            }
        }

        if (controllerContext.HttpContext.Request["HTTP_ACCEPT"] != null && controllerContext.HttpContext.Request["HTTP_ACCEPT"].Contains("application/json"))
            model.JsonAccepted = true;
        else
            model.JsonAccepted = false;

        return model;
    }
}

这是控制器动作方法：

public ActionResult Upload(UploadViewRequest request)
{
    var path = ''; // create path
    FileStatus status = null;

    try
    {
        if (request.IsChunk)
        {
            if (request.IsFirst )
            {
                // do some stuff that has to be done before the file starts uploading
            }

            var inputStream = request.OriginalFile.InputStream;

            using (var fs = new FileStream(path, FileMode.Append, FileAccess.Write))
            {
                var buffer = new byte[1024];

                var l = inputStream.Read(buffer, 0, 1024);
                while (l > 0)
                {
                    fs.Write(buffer, 0, l);
                    l = inputStream.Read(buffer, 0, 1024);
                }

                fs.Flush();
                fs.Close();
            }

            status = new FileStatus(new FileInfo(path));

            if (request.IsLast) 
            {
                // do some stuff that has to be done after the file is uploaded
            }
        }
        else
        {
            file.SaveAs(path);
            status = new FileStatus(new FileInfo(path));
        } 
    } catch {
        status = new FileStatus 
        {
            error = "Something went wrong"
        };
    }

    // this is just a browser json support/compatibility workaround
    if (request.JsonAccepted)
        return Json(status);
    else
        return Json(status, "text/plain");
}

FileStatus类我用作返回值并将其转换为json（用于UploadFile jquery模块）：

public class FileStatus
{
    public const string HandlerPath = "/";

    public string group { get; set; }
    public string name { get; set; }
    public string type { get; set; }
    public int size { get; set; }
    public string progress { get; set; }
    public string url { get; set; }
    public string thumbnail_url { get; set; }
    public string delete_url { get; set; }
    public string delete_type { get; set; }
    public string error { get; set; }

    public FileStatus()
    {
    }

    public FileStatus(FileInfo fileInfo)
    {
        SetValues(fileInfo.Name, (int)fileInfo.Length, fileInfo.FullName);
    }

    public FileStatus(string fileName, int fileLength, string fullPath)
    {
        SetValues(fileName, fileLength, fullPath);
    }

    private void SetValues(string fileName, int fileLength, string fullPath)
    {
        name = fileName;
        type = "image/png";
        size = fileLength;
        progress = "1.0";
        url = HandlerPath + "/file/upload?f=" + fileName;
        delete_url = HandlerPath + "/file/delete?f=" + fileName;
        delete_type = "DELETE";
        thumbnail_url = "/Content/img/generalFile.png";
    }
}

使用Asp.Net MVC中的blueimp以块的形式上传文件

1 个答案: