使用ng-file-upload指令將文件上載到sails.js服務器

Question

我正在嘗試使用以下指令將文件上傳到sails.js應用服務器： ng-file-upload

我的客戶端上傳已經選擇的圖像是這樣的：

$upload.upload({
        url:'upload/item-image',
        headers:{
            'Content-Type': 'multipart/form-data'
        },
        data:{blah:'blah'},
        file: $scope.uploadFile,
        fileName:$scope.uploadFile.name
    }).success(function(data){
        console.log(data);
    }).error(function(err){
        console.log(err);
    });

我在服務器上處理上傳的sails.js控制器方法如下所示：

upload: function (req, res) {
    req.file('item-image').upload(function (err, files) {
        if (err)
            return res.serverError(err);
        if(!files.length)
            return res.serverError('No files received for upload.');

        var file = files[0];
   ...
   }
...
}

但是，當服務器函數被調用且主體上存在json數據時，req.file（'無論放置在這里'）回調都找不到文件。

提前致謝。

Answer 1

req.file的參數需要是請求中Sails應該查找上載文件的字段的名稱。 如果您正在使用以下內容執行簡單的HTML表單：

<input type="file" name="myFileField" />

那么在您的控制器代碼中，您將擁有：

req.file('myFileField').upload(...);

對於像本問題中引用的ng-file-upload小部件這樣的上傳小部件，有時候弄清楚該字段名稱是什么有點棘手。 在這種情況下，它隱藏在使用說明中 ：

 //fileFormDataName: myFile, // or a list of names for multiple files (html5). // Default is 'file' 

因此，您可以設置fileFormDataName來更改上傳字段名稱，否則默認為file 。

如果您在文檔中找不到字段名稱或通過檢查HTML，最簡單的方法就是上傳（即使它不成功）並使用Chrome中的開發人員工具檢查網絡請求：

這是從Angular文件上傳演示頁面。 您可以在右下角看到name="myFile" ； 這就是你要找的東西。 在這種情況下，文件字段稱為myFile 。

Answer 2

一件重要的事情，如果您想使用以下方法處理后端中的多個文件：

req.file('files').upload({...});

你需要在Upload.upload({})添加arrayKey: ''參數，如下所示：

Upload.upload({
   url: 'http://localhost:1337/uploads',
   arrayKey: '',
   data: {
    files: files
   }