私は最近MEANスタックでプログラミングを始めており、現在、ある種のソーシャルネットワークを実装しています。そのためにMEAN.ioフレームワークを使用しています。私の今の主な問題は、ファイルをアップロードすることです。私がやりたいのは、フォームからAngularJSコントローラーにファイルを受け取り、それをより多くの情報とともにExpressJSに渡して、最終的にすべてをMongoDBに送信できるようにするためです。 (新規ユーザー登録フォームを作成しています)。
ファイル自体をデータベースに保存したくないが、ファイルへのリンクを保存したい。
さまざまな検索クエリを使用してGoogleで何十ものページを検索しましたが、理解または機能するものを見つけることができませんでした。結果を出すまで何時間も検索してきました。それが私がここに来た理由です。
誰かがこれを手伝ってくれる?
ありがとう:)
編集:たぶん少しコードが理解に役立つでしょう。
デフォルトのMEAN.io Users Angular私が基盤として使用しているコントローラーには次のようなものがあります:
$scope.register = function(){
$scope.usernameError = null;
$scope.registerError = null;
$http.post('/register', {
email: $scope.user.email,
password: $scope.user.password,
confirmPassword: $scope.user.confirmPassword,
username: $scope.user.username,
name: $scope.user.fullname
})//... has a bit more code but I cut it because the post is the main thing here.
};
私がやりたいことは、フォームからファイルをこのコントローラに受け取り、それを電子メール、パスワード、名前などと一緒に渡し、サーバー側にあるexpressjsでjsonを使用できるようにすることです。 '/ register'はnodejsルートなので、ユーザーを(ユーザースキーマを使用して)作成し、MongoDBに送信するサーバーコントローラーです。
私は最近このようなことをしました。 angular-file-upload を使用しました。エンドポイントがフォームデータを解析するための node-multiparty も必要です。次に、ファイルをs3にアップロードするために s を使用できます。
これが私の[編集された]コードの一部です。
角度テンプレート
<button>
Upload <input type="file" ng-file-select="onFileSelect($files)">
</button>
角度コントローラー
$scope.onFileSelect = function(image) {
$scope.uploadInProgress = true;
$scope.uploadProgress = 0;
if (angular.isArray(image)) {
image = image[0];
}
$scope.upload = $upload.upload({
url: '/api/v1/upload/image',
method: 'POST',
data: {
type: 'profile'
},
file: image
}).progress(function(event) {
$scope.uploadProgress = Math.floor(event.loaded / event.total);
$scope.$apply();
}).success(function(data, status, headers, config) {
AlertService.success('Photo uploaded!');
}).error(function(err) {
$scope.uploadInProgress = false;
AlertService.error('Error uploading file: ' + err.message || err);
});
};
ルート
var uuid = require('uuid'); // https://github.com/defunctzombie/node-uuid
var multiparty = require('multiparty'); // https://github.com/andrewrk/node-multiparty
var s3 = require('s3'); // https://github.com/andrewrk/node-s3-client
var s3Client = s3.createClient({
key: '<your_key>',
secret: '<your_secret>',
bucket: '<your_bucket>'
});
module.exports = function(app) {
app.post('/api/v1/upload/image', function(req, res) {
var form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
var file = files.file[0];
var contentType = file.headers['content-type'];
var extension = file.path.substring(file.path.lastIndexOf('.'));
var destPath = '/' + user.id + '/profile' + '/' + uuid.v4() + extension;
var headers = {
'x-amz-acl': 'public-read',
'Content-Length': file.size,
'Content-Type': contentType
};
var uploader = s3Client.upload(file.path, destPath, headers);
uploader.on('error', function(err) {
//TODO handle this
});
uploader.on('end', function(url) {
//TODO do something with the url
console.log('file opened:', url);
});
});
});
}
私はこれを自分のコードから変更したので、そのままでは機能しない可能性がありますが、うまくいけば役に立ちます!
最近、mean.ioのパッケージリストに新しいパッケージが追加されました。それは美しさです!
単に実行する:
$平均インストール平均アップロード
これにより、パッケージがノードフォルダーにインストールされますが、パッケージ内のディレクティブにアクセスできます。
http://mean.io/#!/packages/53ccd40e56eac633a3eee335
フォームビューで、次のように追加します。
<div class="form-group">
<label class="control-label">Images</label>
<mean-upload file-dest="'/packages/photos/'" upload-file-callback="uploadFileArticleCallback(file)"></mean-upload>
<br>
<ul class="list-group">
<li ng-repeat="image in article.images" class="list-group-item">
{{image.name}}
<span class="glyphicon glyphicon-remove-circle pull-right" ng-click="deletePhoto(image)"></span>
</li>
</ul>
</div>
そしてあなたのコントローラーで:
$scope.uploadFileArticleCallback = function(file) {
if (file.type.indexOf('image') !== -1){
$scope.article.images.Push({
'size': file.size,
'type': file.type,
'name': file.name,
'src': file.src
});
}
else{
$scope.article.files.Push({
'size': file.size,
'type': file.type,
'name': file.name,
'src': file.src
});
}
};
$scope.deletePhoto = function(photo) {
var index = $scope.article.images.indexOf(photo);
$scope.article.images.splice(index, 1);
}
楽しい!
平均アップロードは廃止され、現在は「アップロード」と呼ばれています。それは- https://git.mean.io/orit/upload で管理されています
この投稿は古いことを知っています。私はそれに遭遇し、@ kentcdoddsは私が本当に好きだと答えましたが、彼が使用したライブラリは現在古くなっており、それらを動作させることができませんでした。だからいくつかの研究の後、私は共有したい新しい同様のソリューションを持っています。
ng-uploadを使用したHTML
_<form >
<div style="margin-bottom: 15px;">
<button type="file" name="file" id="file" ngf-select="uploadFiles($file, $invalidFiles)" accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">Select File</button>
</div>
</form>
_
ng-uploadモジュールを含める
ダウンロードしてファイルを参照し、モジュールを含めます
_var app = angular.module('app', ['ngFileUpload']);
_
これにより、Upload
サービスにアクセスできるようになります。
コントローラコード
_$scope.uploadFiles = function(file, errFiles) {
$scope.f = file;
$scope.errFile = errFiles && errFiles[0];
if (file) {
file.upload = Upload.upload({
url: 'you-api-endpoint',
data: {file: file}
});
//put promise and event watchers here if wanted
}
};
_
ノードAPIコード
以下のコードはすべて、メインのserver.jsファイルのroute
である別のrequired
ファイルにあります。
require('./app/app-routes.js')(app, _);
_var fs = require('fs');
var uuid = require('uuid');
var s3 = require('s3fs'); // https://github.com/RiptideElements/s3fs
var s3Impl = new s3('bucketname', {
accessKeyId: '<your access key id>',
secretAccessKey: '< your secret access key >'
});
var multiparty = require('connect-multiparty');
var multipartyMiddleware = multiparty();
module.exports = function(app, _) {
app.use(multipartyMiddleware);
app.post('/your-api-endpoint',function(req, res){
var file = req.files.file; // multiparty is what allows the file to to be accessed in the req
var stream = fs.createReadStream(file.path);
var extension = file.path.substring(file.path.lastIndexOf('.'));
var destPath = '/' + req.user._id + '/avatar/' + uuid.v4() + extension;
var base = 'https://you-bucket-url';
return s3Impl.writeFile(destPath, stream, {ContentType: file.type}).then(function(one){
fs.unlink(file.path);
res.send(base + destPath);
});
});
_
私がやろうとしたことは、ユーザーに固有のアバターをアップロードすることだけでした。お役に立てれば!!