小编典典

使用WebApi,Ajax上传文件

ajax

我想通过ajax调用使用WebApi上传文件,该文件将保存到数据库中。我尝试了此链接中 给出的代码
。在这里,它将接收到的数据作为未指定扩展名的文件保存到硬盘驱动器中,但是我想要执行类似将文件保存到数据库时的操作,我也想保存文件名和扩展名原因,如果以后需要要下载文件,我可以提供文件名和扩展名。并在链接中将文件作为文件保存到硬盘,但是有什么方法可以直接将文件保存到DB。


阅读 289

收藏
2020-07-26

共1个答案

小编典典

答案分为几个部分。

首先,要上传文件,可以使用包含以下代码的视图:

@using (Html.BeginForm())
{
    <input type="file" value="Choose a file"/>
    <br/>
    <input type="button" value="Upload" id="upload"/>
}

@section scripts
{
<script type="text/javascript">
    $(document).ready(function() {
        $('#upload').click(function () {
            var data = new FormData();
            var file = $('form input[type=file]')[0].files[0];
            data.append('file',file);
            $.ajax({
                url: '/Api/File/Upload',
                processData: false,
                contentType: false,
                data: data,
                type: 'POST'
            }).done(function(result) {
                alert(result);
            }).fail(function(a, b, c) {
                console.log(a, b, c);
            });
        });
    });
</script>    
}

其次,要接收此数据,请使用以下方法创建一个控制器:

public class FileController : ApiController
{
    [HttpPost]
    public async Task<string> Upload()
    {
       var provider = new MultipartMemoryStreamProvider();
       await Request.Content.ReadAsMultipartAsync(provider);

       // extract file name and file contents
       var fileNameParam = provider.Contents[0].Headers.ContentDisposition.Parameters
           .FirstOrDefault(p => p.Name.ToLower() == "filename");
       string fileName = (fileNameParam == null) ? "" : fileNameParam.Value.Trim('"');
       byte[] file = await provider.Contents[0].ReadAsByteArrayAsync();

       // Here you can use EF with an entity with a byte[] property, or
       // an stored procedure with a varbinary parameter to insert the
       // data into the DB

       var result 
           = string.Format("Received '{0}' with length: {1}", fileName, file.Length);
       return result;
    }
}

第三,默认情况下,最大上传大小是有限的。您可以通过修改克服这些限制web.config

  1. 添加maxRequestLength="max size in bytes"<configuration><system.web><httpRuntime>。(或创建该元素(如果不存在):

  2. 添加maxAllowedContentLength<configuration><system.web><security><requestFiltering><requestLimits>元素(如果不存在则创建此元素)

这些条目如下所示:

<configuration>
  <system.web>
    <!-- kilobytes -->
    <httpRuntime targetFramework="4.5" maxRequestLength="2000000" />

<configuration>
  <system.webServer>
   <security>
    <requestFiltering>
      <!-- bytes -->
      <requestLimits maxAllowedContentLength="2000000000"/>

注意:您应该将此<location>元素包含在元素中,以便将此限制仅应用于文件上传的特定路径,如下所示:

<location path="Api/File/Upload">
  <system.web>
     ...
  <system.webServer>
     ...

注意修改根目录web.config,而不要修改Views文件夹中的根目录。

第四,关于将数据保存在数据库中,如果使用EF,则只需要一个像这样的实体:

public class File
{
  public int FileId { get; set; }
  public string FileName { get; set; }
  public byte[] FileContent { get; set; }
}

创建此类的新对象,添加到上下文中并保存更改。

如果使用存储过程,请创建一个具有varbinary参数的过程,然后传递byte[] fileas值。

2020-07-26