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

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

效果图

前端实现

<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>
import AdminAside from '../../components/admin/AdminAside.vue'
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上传图片的,核心代码百行不到,前后端分离。

vuejs使用FormData对象,ajax上传图片文件的更多相关文章

  1. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  2. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  3. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  4. .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

    前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...

  5. IT轮子系列(四)——使用Jquery+formdata对象 上传 文件

    前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...

  6. sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象,同时需要携带其他参数

    今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...

  7. ajax上传图片文件

    这里用的是一个隐藏的iframe,这样可以让form表单提交到这个iframe里面,用户就看不到页面的刷新了 前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题 ...

  8. 使用HTML5 FormData对象实现大文件分块上传(断点上传)功能

    FormData是HTML5新增的一个对象,通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单 ...

  9. JQ中的FormData对象 ajax上传文件

    HTML代码: <form enctype="multipart/form-data" method="POST" name="searchfo ...

随机推荐

  1. JavaScript:数据类型

    JavaScript中数据类型分为两种: 1.基本数据类型 string number boolean null undefined 2.引用类型 数组.Object.function 一.基本数据类 ...

  2. SQLite 日期 & 时间

    具体看http://www.runoob.com/sqlite/sqlite-date-time.html 不过实例介绍的不够详细,以下详细举例: SQLite包含了如下时间/日期函数:datetim ...

  3. Android单行本+多渠道脚本工具

    多渠道包的build相信广大android开发者应该很熟悉了,既可以用ant,写一写正则替换然后build出n个apk, 有时后情况会更复杂些,你比如你有一个app,需要build出一些单行本,代码基 ...

  4. 【总结】牛客职播第十期:程盟有你,way来可期

    一.介绍 携程旅行2018校园春招流程介绍&面试答疑 讲师:宋涛,李响 二.答疑 1,技术都是先通过笔试进行优胜劣汰.论真英雄还是靠技术! 2,英语四级必须过! 3,国外大公司招人,对他们的文 ...

  5. 生成基于Maven的项目文档站点

    在Maven中,可以使用“mvn site”,为您的项目信息生成文档站点. mvn site 生成的网站是在项目的“target/site”文件夹中. mvn site 示例 请参见通过“mvn si ...

  6. C#数据结构----------------------------哈希表源码解析

    转载: C# Hashtable源码剖析 源代码版本为 .NET Framework 4.6.1 本系列持续更新,敬请关注 有投入,有产出. Hashtable实现一个哈希表(也叫散列表),将键映射到 ...

  7. Saltstack配置管理(2)

    1.SaltStack批量安装zabbix_agent端. vim /etc/salt/states/init/zabbix_agnet.sls zabbix_install.conf: pkg.in ...

  8. 作为一枚第二天上班的小小.net程序员(技术宅的那种)很迷茫哦,第一个随笔

    作为一枚第二天上班的小小.net程序员(技术宅的那种)很迷茫哦,第一个随笔

  9. C# 线程安全与 lock锁

    如果你的代码所在的进程中有多个线程在同时运行,而这些线程可能会同时运行这段代码.如果每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就是线程安全的.  或者说:一个类或者 ...

  10. PostgreSQL安装入门教程

    一.安装 首先,安装PostgreSQL客户端. sudo apt-get install postgresql-client 然后,安装PostgreSQL服务器. sudo apt-get ins ...