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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
JS Timing
2007/04/21 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
chrome原生方法之数组
2011/11/30 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
Angular实现form自动布局
2016/01/28 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
js实现转动骰子模型
2019/10/24 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python 常见的排序算法实现汇总
2020/08/21 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
工程力学专业自荐信范文
2014/03/17 职场文书
交通事故私了协议书
2014/04/16 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
子女赡养老人协议书
2016/03/23 职场文书
导游词之无锡梅园
2019/11/28 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS