マルチターアップロードの使い方-jsチュートリアル-php.cn

マルチターアップロードの使い方

php中世界最好的语言

リリース： 2018-04-16 11:43:18

オリジナル

1445 人が閲覧しました

今回はmulter Uploadの使い方と、Multer Uploadを使用する際の注意点を紹介します。実際の事例を見てみましょう。

主に wenpack の使用に関するいくつかの詳細により、まだかなり多くの利点があります。さらに、ノードで混乱することもなくなりました。しかし、正直に言うと、現在のレベルでノードを使用して何かを直接行うのはかなり困難です。今日は、mongodb と mysql データベースの間のリンクをテストしました。したがって、最初に既存のフレームワークを使用し、次にノードを後方から学習したいと思います。

フレームワークはexpressを選択しました

主なことは、いくつかの本で言及されているミドルウェアをテストすることです。これは少し早く書かれたもので、多くの API が古いので、公式 Web サイトに従って更新を少しずつ見つけました。

私が現在便利だと感じているのは、multer と static です。

後者はページをローカルでデバッグできるため、モバイルページに特に役立ちます。

今回は主に multer について説明します。まだすべての機能を実装しているわけではなく、画像を 1 枚アップロードする機能のみを実装しています。その他については説明します。

これはファイルのディレクトリ全体です。主に 2 つのファイルがあり、1 つはルートディレクトリの main.js で、もう 1 つは public/index.html です。

コードを入力してください:

//main.js
let express = require('express');
var multer = require('multer')
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
 })
var upload = multer({ storage: storage })
//var upload = multer({ dest: 'public/' })
 
let app = express()
app.use(express.static('public'))
app.post('/public/index.html',upload.single('myfile'),(req,res,next)=>{
  console.log(req.file)
  res.send(req.file)
})
app.listen(3300,'127.0.0.1')

ログイン後にコピー

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="file" id="file" accept="image/*">
  <p id="result"></p>
  <img src="" alt="" id="img" width="40" height="40">
  <script>
    let file = document.getElementById('file');
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append('myfile', file)
      xhr.open('post', '/public/index.html')
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById('result').innerHTML = this.response
          document.getElementById('img').src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>
</html>

ログイン後にコピー

jqueryライブラリを参照したくないので、ネイティブajaxを書きました。簡単に言うと、ボタンをクリックして画像を選択した後、画像情報がオブジェクトに配置されます。キー名 myfile がバックグラウンドに渡されます。

Express は受信した写真を /public/文件下，这里有个小小的坑。可以看到我在main.js に保存し、次のコード行をコメント化します:

var upload = multer({ dest: 'public/' })

ログイン後にコピー

実際、最初にこのコード行を使用しました dest は、ファイルを保存するパスを選択することを意味しますが、この方法で記述すると、保存されたファイルにサフィックスがありません。

データをフロントに返却するとき

res.send(req.file)

ログイン後にコピー

この問題は非常に深刻です。たとえば、あるシナリオでは、写真をアバターとしてアップロードしますが、次回自分の個人ページに入ると、バックグラウンドから返されたデータを写真のアドレスとして使用できません。とても面倒です。そこで、インターネットで理由を見つけて、上記のコードコメントを次のコメントに置き換えました:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
})
var upload = multer({ storage: storage })

ログイン後にコピー

destination是文件存储的地址，filename設定はファイル名なので、ここに次のように書くと:

filename: function (req, file, cb) {
 cb(null, file.fieldname + '.png');
}

ログイン後にコピー

渡す各画像の名前は myfile.png であり、新しい画像が古い画像を上書きすることがわかります。したがって、渡されたすべての画像を保存するために、上書きされないように、Date.now() を画像ごとに異なる識別子として使用します。

今回はここまでです。次回もっと写真をアップロードするときに更新します。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

BootStrapのテキストエディタコンポーネントSummernoteの使い方を詳しく解説

キーボード上に操作検索コンポーネントが表示される

jqueryを使って配列データを送信し、springmvcで受け取る方法

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