如何避免表单数据中的 url 编码答案

【问题标题】：How to avoid url encoding in Form Data如何避免表单数据中的 url 编码
【发布时间】：2015-07-29 00:05:07
【问题描述】：

我尝试在将文件从 AngularJS 上传到 WebApi 时发布 formData。由于某种原因，所有值都被编码为 %5B%5D 键是正常的。我正在使用库来上传文件。是 JavaScript 问题还是 WebApi。有什么想法吗？

uploadFile: function(ids, files, success, progress, error) {
    return $upload.upload({
        url:  '/Api/User/UploadFile',
        method: "POST",
        data: { ids: ids },
        file: files
    }).progress(progress).success(success).error(error);
}

    public async static Task<MultipartContent> GetMulipartContent(ApiController controller)
    {
        if (!controller.Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        var root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root);
        var fileData = new List<KeyValuePair<string, byte[]>>();

        await controller.Request.Content.ReadAsMultipartAsync(provider);
        foreach (var file in provider.FileData)
        {
            fileData.Add(new KeyValuePair<string, byte[]>(
                file.Headers.ContentDisposition.FileName, 
                File.ReadAllBytes(file.LocalFileName)));           
            FileHelper.WaitFileUnlockedAsync(() => File.Delete(file.LocalFileName), file.LocalFileName, 30, 800);
        }

        return new MultipartContent(provider.FormData, fileData);
    }
}

public class MultipartContent 
{
    public MultipartContent(NameValueCollection formData, List<KeyValuePair<string, byte[]>> fileData)
    {
        FormData = formData;
        FileData = fileData;
    }

    public NameValueCollection FormData { get; private set; }
    public List<KeyValuePair<string, byte[]>> FileData { get; private set; }
}

【问题讨论】：

标签： c# angularjs asp.net-web-api

【解决方案1】：

我会尝试在 AJAX 调用上设置 dataType 和 enctype（不确定 .upload() 方法是什么，但它看起来像一个 jQuery AJAX 调用）。

dataType: 'json',
enctype: 'multipart/form-data'

看看能不能解决问题。

进一步阅读后，.upload() 看起来像是附加到 $http 服务的特殊东西，并且可能已经设置了这些值。

【讨论】：

【解决方案2】：

$upload 是一个 AngularJS 库。问题是上传函数只直接接受一个数组或对象，不允许嵌套对象。问题已经解决了。感谢支持。

uploadFile: function(ids, files, success, progress, error) {
    return $upload.upload({
        url:  '/Api/User/UploadFile',
        method: "POST",
        data: ids, //-------- Problem solved.
        file: files
    }).progress(progress).success(success).error(error);
}

【讨论】：