vue用form上传图片_vuejs使用FormData,ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件。
其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生。接下来就以一个简单的头像上传来说明如何使用。
效果图
前端实现
更改
确认修改
export default {
data() {
return {
avatar: this.$store.state.administrator.avatar,
}
},
methods: {
edit() {
// 修改了头像
if (this.$refs.avatarInput.files.length !== 0) {
var image = new FormData()
image.append('avatar', this.$refs.avatarInput.files[0])
this.axios.post('/avatar', image, {
headers: {
"Content-Type": "multipart/form-data"
}
})
}
})
},
setAvatar() {
this.$refs.avatarInput.click()
},
changeImage(e) {
var file = e.target.files[0]
var reader = new FileReader()
var that = this
reader.readAsDataURL(file)
reader.onload = function(e) {
that.avatar = this.result
}
}
}
}
解释一下上面代码的意思,当我们点击图片会触发setAvatar函数,该函数会触发input的click事件,于是就会弹出文件选择框,当我们选择了一张图片后,触发chageImage函数,这个函数的功能就是预览你上传的图片,单后当我们点击修改按钮后,就会把资源传到后端
后端处理
后端接收到你上传的资源,肯定要把资源保存到服务器,我就以Nodejs来说明,我使用formidable解析上传的数据
exports.avatar = function(req, res, next) {
let form = new formidable.IncomingForm()
form.parse(req, function(err, fields, files) {
if (err) {
return res.json({
"code": 500,
"message": "内部服务器错误"
})
}
// 获取后缀名
let extname = path.extname(files.avatar.name)
let oldpath = files.avatar.path;
let newpath = './public/avatar' + extname;
let avatarName = 'avatar' + extname;
// 更改名字和路径
fs.rename(oldpath, newpath, function(err) {
if (err) {
return res.json({
"code": 401,
"message": "图片上传失败"
})
}
})
// 更新数据库
db.updateMany('users', { "user": username }, { "avatar": avatarName },
function(err, result) {
if (err) {
return res.json({
"code": 401,
"message": "头像更新失败"
})
}
return res.json({
"code":200,
"message": "头像上传成功"
})
})
})
}
后端解析ajax提交的数据和解析采用传统表单提交的数据方法一样,如果你是做前端开发的,不了解后端代码影响不大。
说这么多,还是来个demo吧,https://github.com/wmui/vueblog,这个小项目后台有个头像修改的功能,是使用ajax上传图片的,核心代码百行不到,前后端分离。
在这里挺感谢sf和掘金的朋友的,开源此项目半月左右,收到200多个star,人生第一次这么辉煌。
vue用form上传图片_vuejs使用FormData,ajax上传图片文件相关推荐
- ssm 上传图片到mysql_MySQL+SSM+Ajax上传图片问题的分析(图)
本文主要介绍了MySQL+SSM+Ajax上传图片问题.具有很好的参考价值.下面跟着小编一起来看下吧 第一次写上传图片的代码,碰到很多问题.昨天做了整整一天,终于在晚上的时候成功了.大声欢呼. 但是, ...
- from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- form和ajax同时提交吗,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- vue ajax上传图片
(vue ajax上传图片) 最近在做一个手机端H5页面,需要做图片上传功能,就简单的做一个demo,后端使用的是thinkPHP5,代码此次省略, 下面贴上前端代码, HTML 代码部分: < ...
- 移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象
前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法.发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的f ...
- h5上传图片html5,h5图片上传简易版(FileReader+FormData+ajax)
一.选择图片(input的file类型) 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. ...
- 原生ajax传值php,原生ajax上传图片,php后台处理总结
原生ajax上传图片,php后台处理总结 这篇文章发布于 2018/10/03,归类于 后端数据库等 标签: 原生ajax上传图片,php后台处理图片上传 开始做图片上传,发现之前的处理方式基本忘光了 ...
- thinkphp5通过ajax上传图片并预览
thinkphp5通过ajax上传图片并预览 一.具体需求如图所术: 二.html代码: 三.js代码 四.控制器php代码: 一.具体需求如图所术: 二.html代码: <form class ...
- ajax formdata提交上传,Ajax提交用FormData()上传文件
1.form声明如下 2.ajax设置如下 var formData = new FormData(document.getElementById("form")); $.ajax ...
最新文章
- Leetcode: Palindrome Numbers
- 好玩的东西——一个代码片段
- DL之DNN:利用DNN算法对mnist手写数字图片识别数据集(sklearn自带,1797*64)训练、预测(95%)
- 阿里天气数据接口调用实现(Java和JS)
- 出租车管理系统java_基于jsp的出租车管理系统-JavaEE实现出租车管理系统 - java项目源码...
- Linux CentOS 查看服务器信息命令及其它常用命令
- Android Eclipse ADT使用Tips
- 东南亚本地商ERP仓储系统怎么样?
- [Swift]LeetCode874. 模拟行走机器人 | Walking Robot Simulation
- (转)巧用路由限制你的带宽(转自S.N.T安全小组)
- 点击图片实现图片放大
- 使用log4j失误导致系统假死,记录一下
- upc 6605: 所罗门王的宝藏(矩阵行列规律)
- 工序排班问题数学模型
- 利用Reachability判断网络环境(WAN/WIFI)
- 【Pygame实战】俄罗斯方块 | 太好玩了~停不下来,这种版本(Turtle彩版)你肯定没玩过……(经典怀旧:无人不知的俄罗斯方块)
- c语言“%”(取余)运算,特别是负数时该怎么算
- 腾讯云Cannot parse privatekey: unsupported key format问题解决
- 微信公众号的开发:基于Java版本的服务器(1)
- [论文速览] Probing Neural Network Comprehension of Natural Language Arguments
热门文章
- 常用的C#正则表达式! [转]
- 如何将同一云服务下的虚拟机从经典部署模型迁移到 Azure Resource Manager
- 我想和iOS大牛们交流的问题
- MRC与ARC混合编程的编译器标记
- android中的属性资源
- 工欲善其事 必先利其器
- 开源 Asp.net mvc 用户中心(nUserCenter) 产品机会评估
- 敏捷图书排行 (2011年修订)【转】
- 东北林大计算机考研难吗,北京林业大学考研难吗?一般要什么水平才可以进入?...
- ulead gif animator_搞笑GIF:家庭聚餐,还有三十多个没来呢?|搞笑gif