0

我想用Angularjs上傳圖片誰知道this..REST API希望如何使用Angularjs,多/表單數據

的Content-Type怎麼做才能上傳文件:多/ form-data的

www.abc.com/images/id 
Request Body 
{ 
    // --Boundary_1_1626119499_1392398808202 
    // Content-Type: image/png 
    // Content-Disposition: form-data; filename="ducky.png"; modification-date="Wed, 05 Nov 2016 19:53:17 GMT"; size=713915; name="upload_image"   

    // {binary data truncated for display} 
} 

我的問題是如何使用上面休息API上傳圖像文件,如何分配$ scope.tempObject =我上傳圖片的路徑

$scope.UploadImage = function() { 
     var config = {headers: {  
    'Content-Type': 'multipart/form-data' 

     } 
     } 

    $http.post(properties.customerUploadImage_path + "/"+checkprofile,$scope.tempObject,config).success(function (response) { 
Console.log('Uploaded'); 
    }); 


    } 
+0

使用的Content-type:未定義 –

+1

嗨,你應該考慮使用這個庫。它真的爲我做了伎倆:) https://github.com/danialfarid/ng-file-upload – Deunz

回答

1

我覺得你不要用$http這個正確的方法。

您可以使用headers屬性$http服務的,​​就像這樣:

$scope.UploadImage = function() { 
    var config = { 
    headers: {  
     'Content-Type': 'multipart/form-data', 
    } 
    }; 

    $http({ 
    method: 'POST', 
    url: properties.customerUploadImage_path + "/" + checkprofile, 
    data: $scope.tempObject, 
    config: config, 
    }).success(function (response) { 
    console.log('Uploaded'); 
    }); 


}; 

我建議你看一看的documentation

1

配置與"Content-Type": undefined頭,並使用FORMDATA API:

var config = { headers: { 
        "Content-Type": undefined, 
        } 
       }; 

    vm.upload = function() { 

    var formData = new $window.FormData(); 

    formData.append("file-0", vm.files[0]); 

    $http.post(url, formData, config). 
    then(function(response) { 
     vm.result = "SUCCESS"; 
    }).catch(function(response) { 
     vm.result = "ERROR "+response.status; 
    }); 
    }; 

通常情況下,AngularJS $ HTTP服務使用Content-Type: application/json。通過設置Content-Type: undefined,框架將省略Content-Type標題,瀏覽器將使用其默認內容類型multipart/form-data作爲FormData對象。

請求頭

POST /post HTTP/1.1 
Host: httpbin.org 
Connection: keep-alive 
Content-Length: 388298 
Accept: application/json, text/plain, */* 
Origin: https://run.plnkr.co 
User-Agent: Mozilla/5.0 Chrome/55.0.2883.54 Safari/537.36 
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary9lBDT4yoh8lKWtIH 
Referer: https://run.plnkr.co/cW228poRVzWs67bT/ 
Accept-Encoding: gzip, deflate, br 
Accept-Language: en-US,en;q=0.8 

請求負載

------WebKitFormBoundary9lBDT4yoh8lKWtIH 
Content-Disposition: form-data; name="file-0"; filename="Crop.jpg" 
Content-Type: image/jpeg 


------WebKitFormBoundary9lBDT4yoh8lKWtIH-- 

DEMO on PLNKR

欲瞭解更多信息,請參閱

相關問題