無法發送文件與角度郵政

Question

我想通過離子1與角1發佈.mp4文件與一些數據。雖然張貼通過POSTMAN它是好的和工作。我在申請中獲得Success = false。

在郵差，沒有頭和數據是波紋管， 服務的URL與POST請求http://services.example.com/upload.php 表單數據

j_id = 4124, type = text 
q_id = 6, type = text 
u_id = 159931, type = text 
file = demo.mp4, type = file 

在我的應用程序的身體：

$rootScope.uploadQuestion = function() { 

    var form = new FormData(); 
    form.append("j_id", "4124"); 
    form.append("q_id", "6"); 
    form.append("u_id", "159931"); 
    form.append("file", $rootScope.videoAns.name); //this returns media object which contain all details of recorded video 

    return $http({ 
     method: 'POST', 
     headers: { 'Content-Type': 'multipart/form-data' }, // also tried with application/x-www-form-urlencoded 
     url: 'http://services.example.com/upload.php', 
     // url: 'http://services.example.com/upload.php?j_id=4124&q_id=8&u_id=159931&file='+$rootScope.videoAns.fullPath, 
     // data: "j_id=" + encodeURIComponent(4124) + "&q_id=" + encodeURIComponent(8) + "&u_id=" + encodeURIComponent(159931) +"&file=" + encodeURIComponent($rootScope.videoAns), 
     data: form, 
     cache: false, 
     timeout: 300000 
    }).success(function (data, status, headers, config) { 
     if (status == '200') { 
      if (data.success == "true") { 
       alert('uploading...'); 
      } 


     } 


    }).error(function (data, status, headers, config) { 

    }); 
} 

Answer 1

推薦： POST二進制文件直接

使用multi-part/form-data發佈二進制文件效率不高，因爲base64 encoding會額外增加33％的開銷。如果服務器API接受二進制數據的帖子，直接發佈文件：

function upload(url, file) { 
    if (file.constructor.name != "File") { 
     throw new Error("Not a file"); 
    } 
    var config = { 
     'Content-Type': undefined, 
     transformRequest: [] 
    }; 
    return $http.post(url, file, config) 
     .then(function (response) { 
     console.log("success!"); 
     return response; 
    }).catch(function (errorResponse) { 
     console.error("error!"); 
     throw errorResponse; 
    }); 
} 

通常情況下，$http service編碼JavaScript對象爲JSON strings。使用transformRequest: []覆蓋默認轉換。

---

與'Content-Type': 'multipart/form-data'

張貼時使用FormData API發佈數據，則設置內容類型undefined是很重要的：

function uploadQuestion(file) { 

    var form = new FormData(); 
    form.append("j_id", "4124"); 
    form.append("q_id", "6"); 
    form.append("u_id", "159931"); 
    form.append("file", file); //this returns media object which contain all details of recorded video 

    return $http({ 
     method: 'POST', 
     headers: { 'Content-Type': undefined ̶'̶m̶u̶l̶t̶i̶p̶a̶r̶t̶/̶f̶o̶r̶m̶-̶d̶a̶t̶a̶'̶ }, // also tried with application/x-www-form-urlencoded 
     url: 'http://services.example.com/upload.php', 
     data: form, 
     ̶c̶a̶c̶h̶e̶:̶ ̶f̶a̶l̶s̶e̶,̶ 
     timeout: 300000 
    ̶}̶)̶.̶s̶u̶c̶c̶e̶s̶s̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶ 
    }).then(function(response) { 
     var data = response.data; 
     var status = response.status; 
     if (status == '200') { 
      if (data.success == "true") { 
       alert('uploading...'); 
      } 


     } 


    ̶}̶)̶.̶e̶r̶r̶o̶r̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶ 
    }).catch(function(response) { 

     //IMPORTANT 
     throw response;  
    }); 
} 

當XHR API send method發送FormData Object，它自動設置內容類型標題與適當的邊界。當$http service重寫內容類型時，服務器將獲得沒有適當邊界的內容類型標題。