RESTLET - 客戶端上的Angular.JS文件上傳

我們在客戶端使用Restlet作爲我們的API，所有服務器端都在Laravel 5中編寫。我們在一部分中遇到問題。我們有幾個端點需要您上傳文件。 - 在角度，我已經如此，使用下面的方法迄今爲止的工作：RESTLET - 客戶端上的Angular.JS文件上傳

var fd = new FormData(); 
fd.append('image', $scope.file); 
$http.post(apiURL + "/upload", fd, { 
     transformRequest: angular.identity, 
     headers: { 
       'Content-Type': undefined 
     } 
}).then(function(response) { 
     //yay it worked 
}, function(response) { 
     //try again 
});

我不知道這是爲什麼，我已經成功的唯一途徑，但我想在改變它的Restlet端點我創建了。對於大多數我的電話的，它是如此簡單：

$rootScope.restlet.getCompanyAll().then(function(response) { 
     $scope.companies = response.data; 
});

和

var config = { 
    params: { 
     start: "2016-01-01", 
     end: "2016-01-31" 
    } 
}; 
var id = 1; 
$rootScope.restlet.getCompanyStatsCompany_id(id, config).then(function(response) { 
     $scope.companies = response.data; 
});

很簡單，但是當我試圖實現圖像的後期，它不承認它，並完全離開圖像。這裏是我嘗試使用的代碼，它使用非Restlet方式，但不適用於Restlet。

var config = { 
    params: { 
     name: $scope.newCompany.name, 
     rep_id: $scope.newCompany.rep_id, 
     image: $scope.image_input 
    } 
}; 
var id = 1; 
$rootScope.restlet.postCompanyCreate(config).then(function(response) { 
     $scope.companies = response.data; 
});

有沒有人得到這樣的工作嗎？如果是這樣，它是如何工作的？謝謝！ :)

編輯1：

這是我設置的頁面的HTML。它確實有一個文件輸入，但由於某種原因，Restlet不喜歡該文件。我已經嘗試了一個純文件輸入，以及一個帶有指令的輸入。我正在使用的當前版本是一個圖像，點擊時會鏈接到隱藏的文件輸入。我目前也在使用自定義指令。

HTML：

<div class="modal-body"> 
    <form ng-submit="createCompany()"> 
    <!-- OTHER FORM STUFF GOES HERE --> 
      <div class="col-sm-12"> 
       <img src="" id="imagePreview" onClick="$('#imageUpload').trigger('click');" style="max-width: 100%;" /> 
       <input type="file" style="display: none;" id="imageUpload" file="file" /> 
      </div> 
    <!-- FORM SUBMIT AND RESET BUTTONS HERE --> 
    </form> 
</div>

自定義指令：

app.directive('file', function() { 
     return { 
       scope: { 
         file: '=' 
       }, 
       link: function(scope, el, attrs) { 
         el.bind('change', function(event) { 
           var file = event.target.files[0]; 
           scope.file = file ? file : undefined; 
           scope.$apply(); 
         }); 
       } 
     }; 
});

來源

2016-06-06 Brian Logan

你不發表您的HTML，但我假設你使用的是有一個文件類型的輸入指定要上傳的文件並與ng-model或一些本地的Angular綁定機制綁定。我不知道爲什麼，但Angular不支持這一點。有兩種常見的方法來實現這一點。

第一個是使用一個指令來解決這個問題。這裏有一個：https://github.com/danialfarid/ng-file-upload。

第二，至少在哪裏我會開始，你可以簡單地使用document.getElementById從控制器的輸入中檢索文件名。 IOW，$scope.file = document.getElementById("myFileThingy").value。

來源

2016-06-09 12:53:58

我編輯過的問題包括我的HTML以及我目前使用的自定義指令。忽略醜陋的間距，堆棧溢出做了一些奇怪的選項卡。 –

我沒有想過使用本機JS來抓取文件。這對Angular來說似乎是簡單的...然後再一次...我爲任何可行的工作而努力。 –

是的，document.getElementById方法工作得很好。我曾經考慮過創建一個指令來做到這一點，但還沒有完成。 –

RESTLET - 客戶端上的Angular.JS文件上傳

回答

相關問題