vue は画像をデータベースにアップロードし、ページに表示します

この記事ではvueで実装されている画像をデータベースにアップロードしてページに表示する機能を中心に、vue.jsをベースにしたデータベース操作やページ画像表示関連の操作スキルをサンプル形式で紹介しています。皆さんの参考になれば幸いです。

1. クリックして写真をアップロードすると、写真選択オプションボックスが表示されます。

ページコード:

<p class="form-signin-heading" id="btnUpload" @change="upload">上传图片</p>
<input type="file" name="avatar" id="avatar" multiple="multiple" @change="upload">
<img :src="&#39;http://localhost:8888&#39;+item.photos_url" alt=""/>

アップロードした画像のスタイルを設定したいので、入力を非表示にし、次の操作を実行して入力のクリックイベントをPボックスに送信します:

mounted: function () {
 var upload = document.getElementById("btnUpload");
 var avatar = document.getElementById("avatar");
 upload.onclick =function(){
  avatar.click(); //注意IE的兼容性
 };
}

2. API インターフェースで 2 つのファイルをコントローラー層に追加し、次のように名前を付けます。ページ内をデータベースに

let multer=require('multer');
let storage = multer.diskStorage({
  //设置上传后文件路径，uploads文件夹会自动创建。
  destination: function (req, file, cb) {
    cb(null, './public/uploads')
  },
  //给上传文件重命名，获取添加后缀名
  filename: function (req, file, cb) {
    let fileFormat = (file.originalname).split(".");
    cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
});
//添加配置文件到multer对象。
let upload = multer({
  storage: storage
});
module.exports = upload;

関連する推奨事項:

ページからデータベースに画像をアップロードするための PHP サンプル コードの共有

以上がvue は画像をデータベースにアップロードし、ページに表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。