vue实现的上传图片到数据库并显示到页面功能示例

栏目: 编程语言 · JavaScript · 前端 · 发布时间: 6年前

内容简介:这篇文章主要介绍了vue实现的上传图片到数据库并显示到页面功能,结合实例形式分析了基于vue.js的数据库操作及页面图片显示相关操作技巧,需要的朋友可以参考下

本文实例讲述了vue实现的上传图片到数据库并显示到页面功能。分享给大家供大家参考,具体如下:

1、点击上传图片,弹出选择图片选项框。

页面代码:

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

由于我们要设置上传图片的样式,所以把input隐藏,并要做如下操作把input的点击事件给div框:

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

2、在api接口的controller层加入两个文件,命名自己定,如:

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、在页面中将图片的地址存到数据库

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("文件格式不支持上传");
    }
}

希望本文所述对大家vue.js程序设计有所帮助。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法导论

算法导论

[美] Thomas H. Cormen、Charles E. Leiserson、Ronald L. Rivest、Clifford Stein / 高等教育出版社 / 2002-5 / 68.00元

《算法导论》自第一版出版以来,已经成为世界范围内广泛使用的大学教材和专业人员的标准参考手册。 这本书全面论述了算法的内容,从一定深度上涵盖了算法的诸多方面,同时其讲授和分析方法又兼顾了各个层次读者的接受能力。各章内容自成体系,可作为独立单元学习。所有算法都用英文和伪码描述,使具备初步编程经验的人也可读懂。全书讲解通俗易懂,且不失深度和数学上的严谨性。第二版增加了新的章节,如算法作用、概率分析......一起来看看 《算法导论》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器