vue实现的上传图片到数据库并显示到页面功能示例
时间:2019-04-13
本文章向大家介绍vue实现的上传图片到数据库并显示到页面功能示例,主要包括vue实现的上传图片到数据库并显示到页面功能示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了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程序设计有所帮助。
- Java直接(堆外)内存使用详解
- Html再学
- com.android.ddmlib.InstallException: Unable to upload some APKs?
- GET/POST/g和钩子函数(hook)
- cookie和session
- Python Flask模块
- Java直接内存与非直接内存性能测试
- Elasticsearch——multi termvectors的用法
- Elasticsearch增删改查 之 —— Delete删除
- Elasticsearch增删改查 之 —— Get查询
- 实现两个N*N矩阵的乘法,矩阵由一维数组表示
- Elasticsearch入门必备——ES中的字段类型以及常用属性
- C++容器与算法
- Effective c++ 小结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Apache vhost配置
- win10使用WSL 2运行Docker Desktop,运行文件从C盘迁移到其他目录
- htaccess简介和16个小技巧
- Nginx禁止指定目录运行PHP脚本
- 机器学习数学笔记|偏度与峰度及其 python 实现
- ABP(ASP.NET Boilerplate Project)快速入门
- IdentityServer4 4.x版本 配置Scope的正确姿势
- 个人总结的部分数据验证规则
- 一句话实现php日期转中文汉字
- .Net Core微服务入门全纪录(八)——Docker Compose与容器网络
- PHP中少用但是很好用的方法
- 使用一维数据构造简单卷积神经网络
- .Net Core微服务入门全纪录(完结)——Ocelot与Swagger
- PHP使用GD库生成文件
- 反向传播算法从原理到实现