WebAPI Angularjs 上傳檔案

大穩·楊發表於2018-10-08
WebAPIAngularJS

直接上程式碼

HTML頁面程式碼：

 

<label>資源URL</label>
<input type="text" class="form-control" id="txtSourceURL" name="txtSourceURL" 
　　　　　　　　　　ng-model="editdata.SourceURL"  placeholder="資源URL" ng-maxlength="500">
<!--檔案地址展示-->            
　　
<button id="chooseFile" onclick="$(`#fileUpload`).click()">選擇檔案上傳</button> 
<!--加這個控制元件是實現選擇檔案上傳檔案功能，減少頁面上控制元件的數量，方便樣式的調整-->
            
<input id="fileUpload" type="file" onchange="$(`#uploads`).click()" style="display: none;" /> 
<!--瀏覽器自帶的上傳檔案控制元件，我也想過change事件直接呼叫save()方法，但是好像不管用，我只好通過這種中轉呼叫了，大家有知道的告訴我-->

<button ng-click="save()" id="uploads" style="display: none;">確定上傳</button> 
<!--必須使用其他控制元件(按鈕或者標籤)呼叫上傳（save()）方法-->

 

 

 

controller.js程式碼

    app.controller(`editController`, [`$scope`, "$http", `webConfig`, function ($scope, $http, webConfig) {
        $scope.save = function () {
            var fd = new FormData();
            var file = document.querySelector(`input[type=file]`).files[0];
            fd.append(`logo`, file); //angular 上傳的檔案必須使用特殊的格式處理，不是json格式
            $http({
                method: `POST`,
                url: webConfig.apiRoot + "/api/ECategoryDetail/PostFiles", //"https://localhost:44320//api/ECategoryDetail/PostFiles"
                data: fd,
                headers: { `Content-Type`: undefined }, // 寫成是undifined，瀏覽器才自動轉化為 檔案上傳的型別
                transformRequest: angular.identity
            }).success(function (response) {
                //上傳成功的操作
                if (response.mark) //介面返回的資料標誌位，是否儲存成功，儲存成功則把檔案相對地址更新到實體中
                    $scope.editdata.SourceURL = response.result;
                else
                    alert("上傳失敗");
            });
        };
    }]);

webapi程式碼：

        /// <summary>
        /// 上傳檔案
        /// </summary>
        [HttpPost, Route("api/ECategoryDetail/PostFiles")]
        public IHttpActionResult PostFiles()
        {
            var result = "";
            var filelist = HttpContext.Current.Request.Files;
            var mark = true;
            if (filelist.Count > 0)
            {
                for (var i = 0; i < filelist.Count; i++)
                {
                    var file = filelist[i];
                    var fileName = file.FileName;
                    var virtualPath = "/UploadFile/Files/";
                    var path = HttpContext.Current.Server.MapPath(virtualPath);//檔案全路徑
                    if (!Directory.Exists(path))
                    {
                        Directory.CreateDirectory(path);
                    }
                    var filePath = $"{path }{fileName}";
                    try
                    {
                        file.SaveAs(filePath);
                        result = $@"{virtualPath}{fileName}";
                    }
                    catch (Exception ex)
                    {
                        result = "上傳檔案寫入失敗：" + ex.Message;
                        mark = false;
                    }
                }
            }
            else
            {
                result = "上傳的檔案資訊不存在！";
                mark = false;
            }

            var json = new { result, mark };
            return Ok(json);
        }

 

有疑問歡迎交流。

 

相關文章