NodeJS イメージのアップロード例のチュートリアル-jsチュートリアル-php.cn

NodeJS イメージのアップロード例のチュートリアル

零下一度

リリース： 2017-07-02 10:23:38

オリジナル

1367 人が閲覧しました

この記事では主に 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:

$(&#39;.fileupload&#39;).change(function(event) {

  /* Act on the event */

  if ($(&#39;.fileupload&#39;).val().length) {

    var fileName = $(&#39;.fileupload&#39;).val();

    var extension = fileName.substring(fileName.lastIndexOf(&#39;.&#39;), fileName.length).toLowerCase();

    if (extension == ".jpg" || extension == ".png") {

        var data = new FormData();

        data.append(&#39;upload&#39;, $(&#39;#fileToUpload&#39;)[0].files[0]);

        $.ajax({

          url: &#39;apply/upload&#39;,

          type: &#39;POST&#39;,

          data: data,

          cache: false,

          contentType: false, //不可缺参数

          processData: false, //不可缺参数

          success: function(data) {

            console.log(data);

          },

          error: function() {

            console.log(&#39;error&#39;);

          }

        });

    } 

  }

});

ログイン後にコピー

サーバー側保存

NodeJS サーバー側保存にはサードパーティのプラグインの使用が必要です。ノードの強力な npm インストールアドレス:

npm install formidable@latest

ログイン後にコピー

写真をアップロード

var cacheFolder = &#39;public/images/uploadcache/&#39;;<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 = &#39;utf-8&#39;; //设置编辑

  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 = &#39;&#39;; //后缀名

    switch (files.upload.type) {

      case &#39;image/pjpeg&#39;:

        extName = &#39;jpg&#39;;

        break;

      case &#39;image/jpeg&#39;:

        extName = &#39;jpg&#39;;

        break;

      case &#39;image/png&#39;:

        extName = &#39;png&#39;;

        break;

      case &#39;image/x-png&#39;:

        extName = &#39;png&#39;;

        break;

    }

    if (extName.length === 0) {

      res.send({

        code: 202,

        msg: &#39;只支持png和jpg格式图片&#39;

      });

      return;

    } else {

      var avatarName = &#39;/&#39; + Date.now() + &#39;.&#39; + 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(&#39;progress&#39;, function(bytesReceived, bytesExpected) {

});

ログイン後にコピー

node-formidable 公式 API が多数ありますこの記事では、必要に応じていくつかの設定オプションを設定します。追加の必要がある場合は、公式アドレスを参照してください~

以上がNodeJS イメージのアップロード例のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

NodeJS イメージのアップロード例のチュートリアル