ホームページ >ウェブフロントエンド >jsチュートリアル >NodeJS イメージのアップロード例のチュートリアル
この記事では主に NodeJS の画像アップロード コード (Express) を紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう。
ファイルのアップロードは、主に 2 つの問題を解決するために必要です。非常に機能的ですが、実行するのはそれほど簡単ではありません。最も単純なページのアップロード ページ スタイルから始めましょう。
ページスタイル
デフォルトのアップロードされたHTMLページは比較的醜いので、背景画像をやり直して、背景画像を介してアップロードされた画像を追加する必要があります:
アップロードされた画像スタイル:
<p class="upload-container"> <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" /> </p>
CSS style:
.upload-container {
background-image: url(../../images/rv/add.jpg);
background-repeat: no-repeat;
width: 180px;
height: 200px;
padding-bottom: 10px;
display: inline-block;
vertical-align: middle;
.fileupload {
opacity: 0;
filter: alpha(opacity=0);
width: 200px;
height: 200px;
}
}Html クリックアップロード この記事では主に、iFrame アップロードと Ajax アップロードの 2 つの方法を使用します。Ajax アップロードは、HTML5 で提案された XMLHttpRequest オブジェクトの第 2 バージョンです。ファイル データを送信します。これは FormData:
$('.fileupload').change(function(event) {
/* Act on the event */
if ($('.fileupload').val().length) {
var fileName = $('.fileupload').val();
var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
if (extension == ".jpg" || extension == ".png") {
var data = new FormData();
data.append('upload', $('#fileToUpload')[0].files[0]);
$.ajax({
url: 'apply/upload',
type: 'POST',
data: data,
cache: false,
contentType: false, //不可缺参数
processData: false, //不可缺参数
success: function(data) {
console.log(data);
},
error: function() {
console.log('error');
}
});
}
}
});サーバー側保存
NodeJS サーバー側保存にはサードパーティのプラグインの使用が必要です。ノードの強力な npm インストール アドレス:
npm install formidable@latest
写真をアップロード
var cacheFolder = 'public/images/uploadcache/';<br>exports.upload = function(req, res) {
var currentUser = req.session.user;
var userDirPath =cacheFolder+ currentUser.id;
if (!fs.existsSync(userDirPath)) {
fs.mkdirSync(userDirPath);
}
var form = new formidable.IncomingForm(); //创建上传表单
form.encoding = 'utf-8'; //设置编辑
form.uploadDir = userDirPath; //设置上传目录
form.keepExtensions = true; //保留后缀
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.type = true;
var displayUrl;
form.parse(req, function(err, fields, files) {
if (err) {
res.send(err);
return;
}
var extName = ''; //后缀名
switch (files.upload.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if (extName.length === 0) {
res.send({
code: 202,
msg: '只支持png和jpg格式图片'
});
return;
} else {
var avatarName = '/' + Date.now() + '.' + extName;
var newPath = form.uploadDir + avatarName;
displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName;
fs.renameSync(files.upload.path, newPath); //重命名
res.send({
code: 200,
msg: displayUrl
});
}
});
};さまざまなユーザーがアップロードしてさまざまな場所に配置します。もちろん、各写真に異なる ID 番号を割り当てることもできます。サードパーティの UUID プラグイン: https://github.com/broofa/node-uuid
ファイル名変更:
fs.renameSync(files.upload.path, newPath); //重命名
ファイルアップロードの進行状況:
form.on('progress', function(bytesReceived, bytesExpected) {
});node-formidable 公式 API が多数ありますこの記事では、必要に応じていくつかの設定オプションを設定します。追加の必要がある場合は、公式アドレスを参照してください~
以上がNodeJS イメージのアップロード例のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。