用vuejs如何实现ajax,vuejs使用FormData实现ajax上传图片文件
vuejs使用FormData实现ajax上传图片文件
发布时间:2020-10-21 15:59:34
来源:脚本之家
阅读:102
作者:wmui
我相信很多使用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上传图片的,核心代码百行不到,前后端分离。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
用vuejs如何实现ajax,vuejs使用FormData实现ajax上传图片文件相关推荐
- 使用FormData进行Ajax请求异步上传图片案例
2019独角兽企业重金招聘Python工程师标准>>> 工作时遇到一个对轮播图管理的需求,开发过程遇到些问题,总算顺利解决,记录下来供大家参考.原项目是基于SSM框架搭建的,现将Aj ...
- 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
<script type="text/jscript">$(function () {$("#btn_uploadimg").click(funct ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- ajax卡死new formdata(),使用FormData和jQuery上传Ajax大文件无法发布数据
我正在尝试使用FormData通过AJAX上传文件 . 如果我在没有选择要上传的文件的情况下提交AJAX调用,则帖子工作正常,并且在服务器上接收其他字段(不是文件上载) . 如果我选择要上传的文件,则 ...
- ashx获取input file 文件_通过Ajax方式上传文件(input file),使用FormData进行Ajax请求...
一直以来上传文件都使用的是别人的组件,今天看下无刷新上传内部具体的做法.上传文件可以使用form的形式来上传,也可以通过构造formData使用ajax来上传文件: 上传图片 $(function ( ...
- JQuery Ajax使用FormData对象上传文件 图片
通过jQuery Ajax使用FormData对象上传文件 FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单" ...
- ajax传输formdata为空,javascript - 通过jQuery和FormData的Ajax POST请求 - $ _POST在PHP上为空 - 堆栈内存溢出...
我希望使用jQuery和FormData通过ajax将图像上传到服务器. 我的jQuery代码如下 var formData = new FormData("form")[0]; ...
- AJAX的post请求与上传文件
之前介绍了AJAX的get的请求方式与跨域请求,除此之外AJAX还可以进行异步的post请求,在使用post方式的请求时需要设置请求头,如下: xhr.setRequestHeader("C ...
- js中的json ajax,js结合json实现ajax简单实例
这篇文章主要为大家详细介绍了js结合json实现ajax简单实例的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 前期准备 1.安装wampserver或者其他相似软件来搭建本地集成安装环 ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍JSON独立于语言,是一种与语言无关的数据格式.JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数 ...
最新文章
- NGUI中深度depth和z轴关系的小试验
- LeetCode 1496. 判断路径是否相交(set)
- 记那些年在asp.net mvc上挖过的坑
- 利用openpyxl模块来操作Excel
- 软件系统架构有哪几种?
- knex 单表查询_sql 单表查询练习
- 用WPF开发仿QQ概念版之--------Loading预加载界面(闪屏窗体)
- wps2000集成办公系统 v3.02.99专业版(附序列号)|wps2000老版本
- webUploader选择文件按钮无效
- matlab rtw 生成c代码,MATLAB Coder ——从MATLAB代码生成C/C++代码
- 麦肯锡:释放智能网联汽车数据全生命周期价值​潜力
- 亚马逊抛出“下一代贸易链”整合解决方案:中国跨境电商如何借道转型?
- 计算机基础(9)——win10(5)——WIN10怎么把IE浏览器放到桌面
- 液晶电视英文linux使用教程,【详解UbuntuTV 电视与人们的生活】PjTime.COM液晶电视 技术介绍...
- npm 删除已安装的依赖
- oracle函数怎么遍历二维数组,oracle存储过程之游标查询,一维和二维数组,循环,条件判断例子...
- Java胖老鼠的交易
- 年前跳槽还是年后跳槽
- 精美苹果cms影视双端同步APIcloud混合原生APP源码
- wps之excel学习(二)
热门文章
- Android音视频开发全系列教程
- 在renderman中使用raytrace 计算fur的项目
- nutch ajax mysql_Nutch爬取Ajax请求的动态网页
- 用友华表Cell组件/插件注册
- 大话开发板技术支持——在www.ouravr.com上看到一个老兄对一个开发板淘宝代理提出控诉之后...
- 微机原理与接口技术知识点整理
- batchplot插件用法_batchplot批量打印怎么用?Batchplot(CAD批量打印工具)安装步骤
- excel android 官网下载地址,excel手机版app下载-excel手机版(excel教程学习)下载v2.0 安卓版-西西软件下载...
- php李炎恢笔记,一步步学习php笔记 李炎恢瓢城web俱乐部
- C# Winform SplitContainer组件创建侧边菜单