无法将文件上传到 web api

Question

我正在创建一个 web api 项目。我已成功完成基于令牌的身份验证。但我正在努力将图像上传到网络 api。

我有以下看法

 <form data-bind="submit: uploadApi"> 

    <div>
        <label for="caption">Image Caption</label>
        <input name="caption" type="text" />
    </div>
    <div>
        <label for="image1">Image File</label>
        <input name="image1" type="file" />
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

我使用的javascript代码如下

    self.uploadApi = function () {

    self.result('');

    var token = sessionStorage.getItem(tokenKey);
    var headers = {};
    if (token) {
        headers.Authorization = 'Bearer ' + token;

    }

    var data = new FormData();
    var file = self.imgPath();
    data.append('file', file);

    $.ajax({
        type: 'POST',
        url: '/api/Upload',
        processData: false,
        contentType: false,
        headers: headers,
        data:data
    }).done(function (data) {
        alert("hai");
        self.result(data.FileName);
    }).fail(showError);



} 

我的控制器代码如下

    [Route("api/Upload")]
    [HttpPost]
    [MimeMultipart]
    public async Task<FileUploadResult> Post()
    {
        var uploadPath = HttpContext.Current.Server.MapPath("~/Uploads");

        var multipartFormDataStreamProvider = new UploadMultipartFormProvider(uploadPath);

        // Read the MIME multipart asynchronously 
        await Request.Content.ReadAsMultipartAsync(multipartFormDataStreamProvider);

        string _localFileName = multipartFormDataStreamProvider
            .FileData.Select(multiPartData => multiPartData.LocalFileName).FirstOrDefault();

        // Create response
        return new FileUploadResult
        {
            LocalFilePath = _localFileName,

            FileName = Path.GetFileName(_localFileName),

            FileLength = new FileInfo(_localFileName).Length
        };
    }

javascript 能够调用控制器操作（触发断点）。但无法将图像上传到文件夹 实际上，控制器代码是从另一个使用 angular js.in angular js 的项目中复制的，我使用以下代码来调用控制器操作

 $scope.startUploading = function ($files) {
        //$files: an array of files selected
        for (var i = 0; i < $files.length; i++) {
            var $file = $files[i];
            alert($file);
            (function (index) {
                $scope.upload[index] = $upload.upload({
                    url: "./api/fileupload", // webapi url
                    method: "POST",
                    file: $file
                }).progress(function (evt) {
                }).success(function (data, status, headers, config) {
                    // file is uploaded successfully
                    $scope.UploadedFiles.push({ FileName: data.FileName, FilePath: data.LocalFilePath, FileLength : data.FileLength });
                }).error(function (data, status, headers, config) {
                    console.log(data);
                });
            })(i);
        }
    }

任何人都可以在 ajax 请求中提出正确的安排吗？

Answer 1

昨天做了几乎相似的任务。以下代码可能会有所帮助：

JavaScript

var formData = new FormData();            
var file = $('#fileUploader').prop('files');
formData.append("fileUploader", $("#fileUploader")[0].files[0]);
formData.append("DocumentID", $("#hdnDoc").val());

$.ajax({
                type: "POST",
                url: 'URL',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                })

})

网络 API

public FileUploadResult Upload()
{
   HttpPostedFileBase file = Request.Files[0];
   using (var reader = new System.IO.BinaryReader(file.InputStream))
   {
       fileForDocumentStore.Document =      reader.ReadBytes(file.ContentLength);
   }

// you got file now, do your stuff.
}