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 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 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对XML的操作详解
2013/06/07 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
javascript表单正则应用
2017/02/04 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Python with语句和过程抽取思想
2019/12/23 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
文秘专业自荐信
2013/10/14 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
2014年度思想工作总结
2014/11/27 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
redis中lua脚本使用教程
2021/11/01 Redis
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
利用Redis实现点赞功能的示例代码
2022/06/28 Redis
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers