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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
Js切换功能的简单方法
Nov 23 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
js 图片懒加载的实现
Oct 21 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
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
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Django用户认证系统 User对象解析
2019/08/02 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
升职自荐书范文
2013/11/28 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
企业党员个人自我评价
2014/09/20 职场文书
考试后的感想
2015/08/07 职场文书
创业计划书之美容店
2019/09/16 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis