NodeJS-画像アップロード (高速)_html/css_WEB-ITnose

最近、画像をアップロードするにはファイルのアップロードが必要になります。その 1 つは、ファイルのアップロード スタイルとサーバー側のパスの保存です。最も単純なページのアップロード ページ スタイルから始めましょう。

ページ スタイル

デフォルトでアップロードされた HTML ページは比較的醜いので、背景画像をやり直して、背景画像を介してアップロードされた画像を追加する必要があります。

アップロード画像スタイル:

<div class="upload-container">                                <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" />                            </div>

CSS スタイル:

.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 クリックアップロード この記事では、HTML5 である Ajax アップロードを使用します。 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 サーバー側保存には 3 番目のバージョンの使用が必要です。 -party プラグイン

ノード強力、npm インストール アドレス:

npm install formidable@latest

写真をアップロード

var cacheFolder = 'public/images/uploadcache/';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 と多くの設定オプションがあります。この記事では、ニーズに応じていくつかの設定を行います。追加の必要がある場合は、公式アドレスを参照してください~