vuejs使用FormData实现ajax上传图片文件


Posted in Javascript onAugust 08, 2017

我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件。

其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生。接下来就以一个简单的头像上传来说明如何使用。

效果图

vuejs使用FormData实现ajax上传图片文件

前端实现

<template>
 <div class="admin">
 <div class="admin-content">
  <div class="edit">
  <div class="avatar">
   <div class="img">
   <img :src="avatar" @click="setAvatar">
   <span>更改</span>
   </div>
   <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput">
  </div>
  <button type="button" @click="edit">确认修改</button>
  </div>
 </div>
 </div>
</template>
<script>
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
  }
 }
 }
}
</script>

解释一下上面代码的意思,当我们点击图片会触发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上传图片的,核心代码百行不到,前后端分离。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
基于Vue实现支持按周切换的日历
Sep 24 #Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 #Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 #Javascript
React Native如何消除启动时白屏的方法
Aug 08 #Javascript
react native带索引的城市列表组件的实例代码
Aug 08 #Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 #Javascript
React-Native 组件之 Modal的使用详解
Aug 08 #Javascript
You might like
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
ie focus bug 解决方法
2009/09/03 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python numpy存取文件的方式
2020/04/01 Python
keras中的backend.clip用法
2020/05/22 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Python创建临时文件和文件夹
2020/08/05 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
全球度假村:Club Med
2017/11/27 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
软件测试英文面试题
2012/10/14 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
房屋租赁协议书
2014/04/10 职场文书
应聘会计求职信
2014/06/11 职场文书
村委会贫困证明范文
2014/09/21 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2015年女生节活动总结
2015/02/27 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python