上傳文件到angularjs中的RESTful服務

我嘗試製作有點像「Dropbox」的角度CRUD應用程序。因此，它必須具有共享和訪問功能的文件和文件夾託管。我被困在如何上傳圖像和視頻文件的問題上？我使用File API（FileReader，Blob）在客戶端預覽文件，但我沒有想法如何將這種類型的數據發佈到服務器。上傳文件到angularjs中的RESTful服務

來源

2014-11-08 Oleh Kuchuk

使用[FORMDATA]（https://developer.mozilla.org/en-US/docs/Web/API/FormData） – aarosil 2014-11-08 20:22:16

因此，我必須創建FormData對象，然後在其中插入數據並將FormData對象發送到我的API？ – 2014-11-11 11:29:13

的確如此，如果您願意，我可以發佈更詳細的示例代碼答案。 – aarosil 2014-11-11 21:50:46

像這樣的東西應該工作以及發送的multipart/form-data請求，後端API：

var file = ... // get from file input; 
var backendUrl = ... 
var fd = new FormData(); 

fd.append('myFile', file, 'filename.ext'); 

$http.post(backendUrl, fd, { 
    // this cancels AngularJS normal serialization of request 
    transformRequest: angular.identity, 
    // this lets browser set `Content-Type: multipart/form-data` 
    // header and proper data boundary 
    headers: {'Content-Type': undefined} 
}) 

.success(function(){ 
    //file was uploaded 
}) 

.error(function(){ 
    //something went wrong 
});

看到這裏供參考：

FormData API Doc

Using FormData Objects (MDN)

multipart-formdata file upload with AngularJS

來源

2014-11-14 07:55:06 aarosil

這非常有幫助。感謝您的幫助。 – 2014-11-14 10:50:45

這是迄今爲止最簡單的互聯網提供的解決方案，謝謝 – FloydThreepwood 2016-03-10 09:54:01

如何填寫「文件」變量？我想，如何將它綁定到輸入控件？ – Nemus 2016-07-20 12:30:14

您可以使用ngFileUpload或angularFileUpload指令上傳文件。

在angularFileUpload的情況下，可以使用在.upload控制器和ngFileUpload的情況下，可以使用.http

此外，還可以使用應用程序/ x-WWW窗體-urlencoded內容類型，而不是multipart提供的文件並不是很大。在application/x-www-form-urlencoded的情況下，您可以將其作爲普通InputStream接收到其餘webservice中的值，因此不需要對多部分數據進行編組。

你可以參考下面的可能方式採用了棱角分明的js和REST Web服務來上傳文件：

http://technoguider.com/2015/08/file-upload-using-angular-js-and-rest-web-service/

來源

2015-08-05 08:30:37 Nishant

上傳文件到angularjs中的RESTful服務

回答

相關問題