我正在使用angularjs进行文件上传。选择的文件应该保存在我们的本地项目目录中,名为'uploads'。如果你知道请告诉我怎么做。
答案 0 :(得分:0)
pdfController.js
var myApp = angular.module('filedownload', ['ngFileUpload']);
myApp.controller('fileCtrl', function ($scope, fileUploadService, $http) {
$scope.uploadFile = function () {
console.log('file modal');
var file = $scope.myFile;
var fileReader = new FileReader();
fileReader.onload = function (fileLoadedEvent) {
$scope.base64 = fileLoadedEvent.target.result;
var dataObj = {
"pdf": $scope.base64
}
var config = {
headers: {
'Content-Type': 'application/json'
}
}
$http.post('http://localhost:3001/upload', dataObj, config)
.then(function (response) {
console.log('Success response: ', response);
}, function (response) {
console.log('Error response: ',response);
});
};
fileReader.readAsDataURL(file);
myApp.service('fileUploadService', function ($http, $q) {
this.uploadFileToUrl = function (file, uploadUrl) {
console.log('file in service: ', file);
console.log('uploadUrl in service: ', uploadUrl);
//FormData, object of key/value pair for form fields and values
var fileFormData = new FormData();
fileFormData.append('file', file);
var deffered = $q.defer();
$http.post(uploadUrl, fileFormData, {
transformRequest: angular.identity,
headers: { 'Content-Type': 'application/pdf', 'Accept': 'application/pdf' }
}).then(function (success) {
console.log('Success: ', success);
deffered.resolve(success);
}, function (error) {
console.log('Error: ', error);
deffered.resolve(error);
})
return deffered.promise;
}
});
/*
A directive to enable two way binding of file field
*/
myApp.directive('demoFileModel', function ($parse) {
return {
restrict: 'A', //the directive can be used as an attribute only
/*
link is a function that defines functionality of directive
scope: scope associated with the element
element: element on which this directive used
attrs: key value pair of element attributes
*/
link: function (scope, element, attrs) {
var model = $parse(attrs.demoFileModel),
modelSetter = model.assign; //define a setter for demoFileModel
//Bind change event on the element
element.bind('change', function () {
//Call apply on scope, it checks for value changes and reflect them on UI
scope.$apply(function () {
//set the model value
modelSetter(scope, element[0].files[0]);
});
});
}
};
});

答案 1 :(得分:0)
HTML:
<div class="panel panel-default">
<div class="panel-body">
<form>
<div class="form-group">
<label for="myFileField">Select a file: </label>
<input type="file" demo-file-model="myFile" class="form-control" id="myFileField" />
</div>
<button ng-click="uploadFile()" class="btn btn-primary">Upload File</button>
</form>
</div>
</div>