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


Posted in Javascript onMarch 17, 2018

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 #Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 #Javascript
对vue里函数的调用顺序介绍
Mar 17 #Javascript
基于vue2.0动态组件及render详解
Mar 17 #Javascript
Vue实现动态创建和删除数据的方法
Mar 17 #Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 #Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
django的settings中设置中文支持的实现
2019/04/28 Python
python实现简单成绩录入系统
2019/09/19 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
秸秆管理实施方案
2014/03/15 职场文书
股票投资建议书
2014/05/19 职场文书
如何写求职信
2014/05/24 职场文书
汽车专业求职信
2014/06/05 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
品德与社会教学反思
2016/02/24 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
 python中的元类metaclass详情
2022/05/30 Python