前端AngularJS後端ASP.NET Web API上傳檔案

 

本篇體驗使用AngularJS向後端ASP.NET API控制器上傳檔案。
    
首先服務端： 

 

public class FilesController : ApiController
{
    //using System.Web.Http
    [HttpPost]
    public async Task<HttpResponseMessage> Upload()
    {
        if(!Request.Content.IsMimeMultipartContent())
        {
            this.Request.CreateResponse(HttpStatusCode.UnsuportedMediaType);
        }
        
        var provider = GetMultipartProvider();
        var result = await Request.Content.ReadAsMultipartAsync(provider);
        
        //檔名類似"BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5"這樣的格式
        var originalFileName = GetDeserializedFileName(result.FileData.First());
        
        var uploadFileInfo = new FileInfo(result.FileData.First().LocalFileName);
        
        //如果前端無表單資料，這裡登出
        var filleUploadObj = GetFormData<UploadDataModel>(result);
        
        var returnData = "ReturnTest";
        return this.Request.CreateResponse(HttpStatusCode.OK, new {returnData});
    }
    
    private MultipartFormDataStreamProvider GetMultipartProvider()
    {
        //圖片的上傳路徑
        var uploadFolder = "~/App_Data/FileUploads";
        
        //獲取根路徑
        var root = HttpContext.Current.Server.MapPath(uploadFolder);
        
        //建立資料夾
        Directory.CreateDirectory(root);
        return new MultipartFormDataStreamProvider(root);
    }
    
    //從Provider中獲取表單資料
    private object GetFormData<T>(MultipartFormDataStreamProvider result)
    {
        if(result.FormData.HasKeys())
        {
            var unescapedFormData = Uri.UnescapeDataString(result.FormData.GetValues(0).FirstOrDefault() ?? String.Empty);
            
            if(!String.IsNullOrEmpty(unescapedFormData))
            {
                return JsonConvert.DeserializeObject<T>(upescapedFormData);
            }
        }
        return null;
    }
    
    //獲取反序列化檔名
    private string GetDeserializedFileName(MultipartFileData fileData)
    {
        var fileName = GetFileName(fileData);
        return JsonConvert.DeserializedObject(fileName).ToString();
    }
    
    //獲取檔名
    public string GetFileName(MultipartFileData fileData)
    {
        return fileData.Headers.ContentDisposition.FileName;
    }
}



UploadDataModel.cs

public class UploadDataModel
{
    public string testString1{get;set;}
    public string testString2{get;set;}
}

 

客戶端主頁面：

index.html

<div ng-include="'upload.html'"></div>

引用：
angular-file-upload-shim.js
angular.js
angular-file-upload.js
angular-cookies.js
angular-resource.js
angular-sanitize.js
angular-route.js
app.js
upload.js

 

upload.html部分檢視頁用來接受檔案。

upload.html

<div ng-controller="UploadCtrl"
    <input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>

 

app.js模組依賴和全域性配置。

app.js

'use strict'

angular.module('angularUploadApp',[
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'angularFileUpload'
])
.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'upload.html',
            controller: 'UploadCtrl'
        })
        .otherwise({
            resirectTo: '/'
        })
})

 

控制器提供上傳和取消上傳的方法。

upload.js

'use strict';

angular.module('angularUploadApp')
    .controller('UploadCtrl', function($scope, $http, $timeout, $upload){
        $scope.upload = [];
        $scope.fileUploadObj = {testString1: "Test ring 1", testString2: "Test string 2"};
        
        $scope.onFileSelect = function ($files) {
            //$files: an array of files selected, each file has name, size, and type.
            for (var i = 0; i < $files.length; i++) {
                var $file = $files[i];
                (function (index) {
                    $scope.upload[index] = $upload.upload({
                        url: "./api/files/upload", // webapi url
                        method: "POST",
                        data: { fileUploadObj: $scope.fileUploadObj },
                        file: $file
                    }).progress(function (evt) {
                        // get upload percentage
                        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                    }).success(function (data, status, headers, config) {
                        // file is uploaded successfully
                        console.log(data);
                    }).error(function (data, status, headers, config) {
                        // file failed to upload
                        console.log(data);
                    });
                })(i);
            }
        }

        $scope.abortUpload = function (index) {
            $scope.upload[index].abort();
        }
    })