前后端结合实现Vue上传图片并预览效果【Node+Mysql+Vue+Express】
一.话不多,先看效果:
大家好呀,⭐⭐⭐⭐⭐,秉着分享快乐的原则,我来啦~
很久以前我写过一篇vue上传图片并显示的文章—> 鼠标点击这里~ 但是上次只是写了前端的,并没有把图片存储在服务器~所以这次出了2.0版本,哈哈,通过node简单写了接口,实现前后端结合!其实并不难,很适合像我们一样的前端新手学习,下面是详细代码实现!
二.详细实现:
1.在数据库新建一个comic表:
首先利用Navicat连接mysql新建一个数据库(mysql的安装与Navicat的使用为基本操作,不难的,就不演示了,不会的自己查查,嘿嘿)。记住自己的数据库名,账号,密码,端口,表名。comic表新建两个字段 id 与 icon:
2. 建立node项目:
要保证电脑已安装了node和npm。然后在本地随便建一个文件夹,在里面新建一个index.js文件。然后打开cmd命令窗口,在本路径下执行以下两条命令:
建一个配置文件,随便起个名字后一直回车就可以了:
npm init
安装(express框架,knex 、mysql、 multer、 body-parser 插件,等会说是干嘛的):
npm i -s express knex mysql multer body-parser
然后文件夹变成如下(可能还没uploads,不急):
3.在index.js写后端接口逻辑代码:
(注释很详细,着重看注释)
// 先导入express,它是一个node框架,能简化代码
const express = require('express')
const app = express()// 导入bodyParser插件,它帮助我们获取前端post请求传过来的参数
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended:false }))//导入上传文件中间件,能帮助我们实现接收文件的接口
const multer = require('multer')
//接收到的文件放uploads文件夹
const upload = multer({ dest: 'uploads/' })
//使得让外部通过链接可以访问这个文件夹里文件( 地址 + 端口 / 文件名 )便可访问
app.use(express.static('uploads'))
//使用接收文件基本接口模板,可到官网查看更详细的
/* app.post('/profile', upload.single('avatar'), function (req, res, next) {// req.file is the `avatar` file// req.body will hold the text fields, if there were any
}) *///定义服务器端口
const port = 8848// 导入knex插件,他能帮助我们连接MySQL数据库
const knex = require('knex')({client: 'mysql',//填入数据库的地址、账号、密码、库名connection: {host : 'localhost',user : 'root',password : 'xxx',database : 'work'}
})//下面这个能解决跨域问题
app.all('*', function(req, res, next) {console.log(req.method);res.header("Access-Control-Allow-Origin", "*");res.header('Access-Control-Allow-Headers', 'Content-type');res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");res.header('Access-Control-Max-Age',1728000);//预请求缓存20天next();
});//使得express后端能接收前端发送回来的json格式数据
app.use(express.json());//实现新增(上传图片)接口,post请求,参数为 icon !!!app.post('/comic/add',upload.single('icon'),(req,response)=>{// req.file得到前端发送回来的文件信息,req.body的到文件文本信息const {file,body} = req //判断是否发送的是空文件回来if( file == undefined){response.send({code:400,msg:'新增失败,参数缺失'})}else{//利用kenx在数据库完成新增操作,保存文件名字段//相当于 insert into comic (icon)values(file.filename)knex('comic').insert({icon:file.filename}).then(res=>{response.send({code:200,msg:'新增成功'})})}})//实现查询接口,就是要返回图片给前端显示
app.get('/comic/all',(req,response)=>{// 相当于 select * from comicknex('comic').select().then(res=>{if(res.length === 0){response.send({code:200,msg:'暂无数据'})}else{response.send({code:200,msg:'查询成功',data:res})}})
})//监听接口
app.listen(port,()=> console.log('(*^ ▽ ^*)北极光之夜。 -----> 启动成功!!!'))
控制台运行后端接口:
node index.js
4.新建一个vue项目写前端:
在本地通过脚手架随便建一个vue项目(这基本的就不演示了)。然后安装axios插件。(这基本的就不演示了,在我的其它文章都有)。直接新建一个html文件写也行,通过链接导入vue和axios。代码部分如下:
vue项目的话直接在App.vue文件写,先定义标签:
<div id="app"><!-- 上传文件按钮,绑定change事件 --><div class="upload"><input type="file" id="file" @change="add($event)" /></div><!-- 显示图片的盒子 --><div class="container"><!-- 假如变量imgs为接口返回的图片数组,循环显示 --><div v-for="(item, index) in imgs" :key="index"><!-- 服务端地址 + 数据库里的 icon字段 便可以显示一张图片 --><img :src="'http://localhost:8848/' + item.icon" alt="" /></div></div></div>
css样式:
body {text-align: center;
}
.container {margin: 30px auto;padding: 30px;width: 60%;box-shadow: 0 0 5px rgb(190, 190, 190);display: flex;flex-wrap: wrap;justify-content: space-around;
}
.container img {width: 250px;height: 150px;object-fit: cover;margin: 30px;
}
.upload {margin: 30px auto;width: 80px;height: 20px;background-color: rgba(135, 206, 235, 0.2);border: 1px dashed black;border-radius: 5px;position: relative;
}
.upload:hover {background-color: rgba(135, 206, 235, 1);
}
.upload::before {position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: "上传图片";font-size: 13px;text-align: center;font-family: "fangsong";line-height: 20px;user-select: none;
}
#file {width: 100%;height: 100%;opacity: 0;
}
5.前端 js 部分:
注意看注释,解释的很详细:
import HelloWorld from "./components/HelloWorld.vue";
import axios from "axios";
export default {name: "App",data() {return {imgs: [],};},components: {HelloWorld,},methods: {//上传图片add(e) {//获取到第一个文件var file = e.target.files[0];//可打印看看console.log(e.target.files);//新建一个 FormData 对象var param = new FormData();// 把文件添加到 FormData对象里param.append("icon", file);//可以打印看看console.log(param.get("file"));//利用axios发送post请求axios.post("http://localhost:8848/comic/add", param, {headers: { "Content-Type": "multipart/form-data" },}).then((res) => {//调用查询方法this.qy();});},//查询qy() {axios({url: "http://localhost:8848/comic/all",method: "get",}).then((res) => {//把后端返回数据赋值给imgsthis.imgs = res.data.data;});},},created() {this.qy();},
};
代码全部完成,接下里运行项目,便能实现效果了,上传图片并显示:
三.总结:
这样子就完成啦,有不清楚的可以留言,一起探讨,码文不易,有用的话点个关注,一键三连那更秒了,嘿嘿~
我的哔哩哔哩空间
Gitee仓库地址:全部特效css、js源码
Q群聊(欢迎):629596039
其它文章:
~关注我看更多简单创意css、js特效:
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结(一)
Sass总结笔记
…等等
进我主页看更多~
前后端结合实现Vue上传图片并预览效果【Node+Mysql+Vue+Express】相关推荐
- Vue上传图片并预览(好)
原文地址:Vue上传图片并预览_as_64的博客-CSDN博客_vue将文件上传的照片预览 1.input用来接收图片,img用来显示图片,让input变成透明并置于img上 <input cl ...
- 前后端分离之评论功能前端(1)——django+mysql+vue+element+axios
评论系统前端 一. 导入vue和element用到的组件 二. 使用element设计页面 2.1 导航菜单 2.2 输入框 2.3 按钮 2.4 显示评论 前言: 作者:神的孩子在歌唱 大家好,我叫 ...
- vue上传图片并预览
html代码: <div id="headImg"><div id="myPhoto"><div class="view ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览
1. 准备工作 因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源 使用express将pu ...
- python与html交互实现图片上传_python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内 ...
- jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...
- 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
- 本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
最新文章
- c++ log函数_认识这19种深度学习损失函数,才能说你了解深度学习!
- C++线性序列容器vector简单总结
- VC++ 常见编译错误
- php歌声美化_PHP代码在线格式化美化工具
- OpenMP之双重for循环并行计算改进
- Java 8 Stream的性能到底如何?
- c语言程序设计电加热炉,基于80C52单片机的电加热数字恒温控制系统设计
- 【公告】个人站点及系列文章
- Eclipse中启动tomcat: java.lang.OutOfMemoryError: PermGen space的解决方法
- Python代码书写规范
- docker日志引擎说明
- Android Studio下载Gradle一直失败,使用正确的下载地址
- 【离散数学】高级计数技术
- button3 电脑上mouse,自定义鼠标按键(X-Mouse Button Control)
- docker使用阿里云Docker镜像库加速
- 【制作脑图】万彩脑图大师教程 | 展开/折叠分支
- gstreamer: 官方参考内容 gst-launch-1.0命令行工具
- 复杂网络是怎么应用于神经网络上
- 34-高级路由:BGP汇总:实验五 route-map+suppress-map过滤、as-set
- 手机屏幕常见故障_手机屏幕失灵怎么回事 手机屏幕失灵解决办法