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 相关文章推荐
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python try except else使用详解
2021/01/12 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
土木工程师职业规划范文
2014/03/07 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
爱祖国演讲稿
2014/05/04 职场文书
超市创意活动方案
2014/08/15 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015新年寄语大全
2014/12/08 职场文书
学生检讨书范文
2015/01/27 职场文书
谢师宴学生致辞
2015/07/27 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python