Exemple de téléchargement d'images dans la base de données et de leur affichage sur la page implémentée dans Vue

Cet article présente principalement la fonction de téléchargement d'images dans la base de données et de leur affichage sur la page implémentée par vue. Il analyse le fonctionnement de la base de données et les compétences opérationnelles liées à l'affichage des images de page basées sur vue.js sous forme d'exemples. le besoin peut s'y référer

L'exemple de cet article décrit la fonction de téléchargement d'images dans la base de données et de leur affichage sur la page implémentée par vue. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1 Cliquez pour télécharger l'image et la boîte d'option de sélection d'image apparaîtra.

Code de la page :

<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=""/>

Puisque nous voulons définir le style de l'image téléchargée, nous masquons l'entrée et procédons comme suit pour donner l'événement click de l'entrée à la boîte p :

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

2. Ajoutez deux fichiers à la couche contrôleur de l'interface API et nommez-les vous-même, par exemple :

upFile.js

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;

upFileController. .js

var muilter = require('./upFile.js');
//multer有single()中的名称必须是表单上传字段的name名称。
var upload=muilter.single('file');
function dataInput(req, res) {
  upload(req, res, function (err) {
    //添加错误处理
    if (err) {
      return console.log(err);
    }
    //文件信息在req.file或者req.files中显示。
    let photoPath = req.file.path;
    photoPath = photoPath.replace(/public/,"");//将文件路径中的public\去掉，否则会和静态资源配置冲突
    //将photoPath存入数据库即可
    console.log(photoPath);
    res.send(photoPath);
  });
}
module.exports = {
  dataInput
};

3. Enregistrez l'adresse de l'image dans la base de données sur la page

upload: function (e) {
    var that = this;
    let formData = new window.FormData();
    let file = e.target.files[0];
    formData.append('file',file);//通过append向form对象添加数据
    //利用split切割，拿到上传文件的格式
    var src = file.name,
     formart = src.split(".")[1];
    //使用if判断上传文件格式是否符合
    if (formart == "jpg" || formart == "png" ||
     formart == "docx" || formart == "txt" ||
     formart == "ppt" || formart == "xlsx" ||
     formart == "zip" || formart == "rar" ||
     formart == "doc") {
     //只有满足以上格式时，才会触发ajax请求
     this.$axios.post(this.$api.personalCenter.upFile,formData).then(function (res) {
      that.upFileData = res.data;
     }).then(function (res) {
      var params = {
       photos_url: that.upFileData,
       photo_des: ''
      };
//      console.log(params.photos_url,'photos_url')
      that.$axios.post(that.$api.personalCenter.wallAdd,qs.stringify(params)).then(function (res) {
       console.log(res.data);
       that.$options.methods.imgList.bind(that)();
      }).catch(function (err) {
       console.log(err);
       console.log("请求出错");
      })
     })
    } else {
     alert("文件格式不支持上传");
    }
}

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde. l'avenir.

Articles connexes :

Instance de spirngmvc js transmettant des paramètres json complexes au contrôleur

Résumé de l'opération de contrôle de formulaire Vue.js

Méthode JS pour transmettre les paramètres du tableau au contrôleur d'arrière-plan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!