Gửi các tệp nhiều phần/biểu mẫu dữ liệu với góc sử dụng $ http

Question

Tôi biết có rất nhiều câu hỏi về vấn đề này, nhưng tôi không thể làm việc này:

Tôi muốn tải tệp lên từ đầu vào máy chủ trong multipart/form-data

Tôi đã thử hai cách tiếp cận. Trước tiên:

headers: { 
    'Content-Type': undefined 
}, 

Kết quả nào, ví dụ: cho một hình ảnh

Content-Type:image/png 

trong khi nó phải được multipart/form-data

và người kia:

headers: { 
    'Content-Type': multipart/form-data 
}, 

Nhưng điều này yêu cầu một tiêu đề ranh giới, mà tôi tin rằng không nên được chèn bằng tay ...

Cách sạch sẽ để giải quyết vấn đề này là gì? Tôi đã đọc rằng bạn có thể làm

$httpProvider.defaults.headers.post['Content-Type'] = 'multipart/form-data; charset=utf-8'; 

Nhưng tôi không muốn tất cả các bài đăng của tôi là nhiều phần/biểu mẫu dữ liệu. Giá trị mặc định nên JSON

Answer 1

Hãy nhìn vào các đối tượng FormData: https://developer.mozilla.org/en/docs/Web/API/FormData

this.uploadFileToUrl = function(file, uploadUrl){ 
     var fd = new FormData(); 
     fd.append('file', file); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
     }) 
     .error(function(){ 
     }); 
    } 

Answer 2

Dưới đây là một câu trả lời được cập nhật cho góc 4 & 5. TransformRequest và angular.identity đã được thả xuống. Tôi cũng đã bao gồm khả năng kết hợp các tệp với dữ liệu JSON trong một yêu cầu.

góc 5 Giải pháp:

import {HttpClient} from '@angular/common/http'; 

uploadFileToUrl(files, restObj, uploadUrl): Promise<any> { 
    // Note that setting a content-type header 
    // for mutlipart forms breaks some built in 
    // request parsers like multer in express. 
    const options = {} as any; // Set any options you like 
    const formData = new FormData(); 

    // Append files to the virtual form. 
    for (const file of files) { 
    formData.append(file.name, file) 
    } 

    // Optional, append other kev:val rest data to the form. 
    Object.keys(restObj).forEach(key => { 
    formData.append(key, restObj[key]); 
    }); 

    // Send it. 
    return this.httpClient.post(uploadUrl, formData, options) 
    .toPromise() 
    .catch((e) => { 
     // handle me 
    }); 
} 

góc 4 Giải pháp:

// Note that these imports below are deprecated in Angular 5 
import {Http, RequestOptions} from '@angular/http'; 

uploadFileToUrl(files, restObj, uploadUrl): Promise<any> { 
    // Note that setting a content-type header 
    // for mutlipart forms breaks some built in 
    // request parsers like multer in express. 
    const options = new RequestOptions(); 
    const formData = new FormData(); 

    // Append files to the virtual form. 
    for (const file of files) { 
    formData.append(file.name, file) 
    } 

    // Optional, append other kev:val rest data to the form. 
    Object.keys(restObj).forEach(key => { 
    formData.append(key, restObj[key]); 
    }); 

    // Send it. 
    return this.http.post(uploadUrl, formData, options) 
    .toPromise() 
    .catch((e) => { 
     // handle me 
    }); 
}