vue使用axios实现文件上传进度的实时更新详解

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

引入方式：

$ npm install axios
//使用淘宝源
$ cnpm install axios
//或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

安装其他插件的时候，可以直接在 main.js 中引入并使用 Vue.use()来注册，但是 axios并不是vue插件，所以不能 使用Vue.use() ，所以只能在每个需要发送请求的组件中即时引入。

为了解决这个问题，我们在引入 axios 之后，通过修改原型链，来更方便的使用。

//main.js

import axios from 'axios'
Vue.prototype.$http = axios

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http命令

methods: {
postData () {
this.$http({
method: 'post',
url: '/user',
data: {
name: 'xiaoming',
info: '12'
}
})
}

更多的基础知识大家可以参考这篇文章：http://www.jb51.net/article/110324.htm

vue使用axios实现文件上传进度实时更新

XHR二级增加了progress事件,我们可以据此在浏览器接收新数据期间添加实时数据进度条,从而使得交互更加友好

vue模板

<div class="progress" @click="upload"
   :style="{backgroundImage:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB '+progress+',#E1E6E9 '+progress+',#E1E6E9 100%)'}">

vue-js

 var form = new FormData()
 form.append('file', vm.$refs.upload.files[0])
 form.append('id', id)
 form.append('type', type)
 var config = {
  onUploadProgress: progressEvent => {
   var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
   this.progress = complete
  }
 }
 axios.post(`api/uploadFile`,
  form, config).then((res) => {
  if (res.data.status === 'success') {
   console.log('上传成功')
  }
 })

关键点在于progress事件,而axios对ajax封装之后需要在axios的config参数里面写好事件处理函数(具体参数写法可查看axios文档)

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:

  • Vue.js实战之使用Vuex + axios发送请求详解
  • vue-axios使用详解
  • VUE 更好的 ajax 上传处理 axios.js实现代码
  • 详解Vue 2.0封装axios笔记
  • VUE axios发送跨域请求需要注意的问题
  • Vue axios 中提交表单数据(含上传文件)
  • vue axios用法教程详解
  • VUE axios上传图片到七牛的实例代码
  • vue项目中使用axios上传图片等文件操作
赞 (0)

相关推荐

  • 详解Vue 2.0封装axios笔记

    详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • vue-axios使用详解

    vue-axios GET请求 axios.get("/user?id=1") .then(function(response){ }) .catch(function(error){ }) POST请求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (erro

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • VUE axios发送跨域请求需要注意的问题

    VUE axios发送跨域请求需要注意的问题

    在实际项目中前端使用到vue,后端使用php进行开发.前端使用axios请求请求 关于跨域 跨域的概念这些就不说了,百度一大堆相关的资料信息.我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛. 不多说,直接上代码~~~~ 同理,跨域的解决方案为cros.服务器 PHP端代码如下(laravel 中间件进行处理): public function handle($request, Closure $next) { if ($request->isMethod('OP

  • VUE axios上传图片到七牛的实例代码

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交. form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据.但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦. 目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台. html部分,至于界

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • VUE 更好的 ajax 上传处理 axios.js实现代码

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios模块之后 import axios from 'axios'; //安装方法 npm install axios //或 bower install axios 当然也可以用script引入 <script src="https://unpkg.com/axios/dist/axios.min

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • vue使用axios实现文件上传进度的实时更新详解

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s

  • php安全攻防利用文件上传漏洞与绕过技巧详解

    目录 前言 文件上传漏洞的一些场景 场景一:前端js代码白名单判断.jpg|.png|.gif后缀 场景二:后端PHP代码检查Content-type字段 场景三:代码黑名单判断.asp|.aspx|.php|.jsp后缀 场景四:代码扩大黑名单判断 绕过方式--htaccsess: 绕过方式--大小写绕过: 场景五:一些复合判断 空格.点绕过(windows) ::$DATA绕过(windows) 双写绕过 %00截断 %0a绕过 图片马绕过 二次渲染绕过 条件竞争 /.绕过 前言 文件上传漏

  • SpringBoot文件上传与下载功能实现详解

    目录 前言 1.引入Apache Commons FileUpload组件依赖 2.设置上传文件大小限制 3.创建选择文件视图页面 4.创建控制器 5.创建文件下载视图页面 前言 文件上传与下载是Web应用开发中常用的功能之一,在实际的Web应用开发中,为了成功上传文件,必须将表单的method设置为post,并将enctype设置为multipart/form-data 只有这样设置,浏览器才能将所选文件的二进制数据发送给服务器 从Servlet3.0开始,就提供了处理文件上传的方法,但这种文

  • Java实现文件上传和下载的方法详解

    目录 1.文件上传 1.1 介绍 1.2 代码实现 2.下载 2.1 介绍 2.2 代码实现 1.文件上传 1.1 介绍 文件上传,也称为upload,是指将本地图片.视频.音频等文件上传到服务器上,可以供其他用户浏览或下载的过程.文件上传在项目中应用非常广泛,我们经常发微博.发微信朋友圈都用到了文件上传功能. 文件上传时,对页面的form表单有如下要求: 表单属性 取值 说明 method post 必须选择post方式提交 enctype multipart/form-data 采用mult

  • vue+element-ui+axios多文件上传的实现并显示整体进度

    目录 element-ui+axios多文件上传并显示进度 解决element ui多文件上传的问题 业务场景 解决办法 element-ui+axios多文件上传并显示进度 element-ui自带的多文件上传是做成了多文件多次上传,公司有需求需要选取多个文件一次上传全部. 代码部分 <template> <d2-container> <el-form ref="form" :model="formData" label-width=

  • Bootstrap fileinput文件上传预览插件使用详解

    Bootstrap fileinput文件上传预览插件使用详解

    介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p

  • php文件上传的例子及参数详解

    1.上传表单 upload.html 程序代码HTML 复制代码 代码如下: <form enctype="multipart/form-data" action="upload.php" method="post">  <input type="hidden" name="max_file_size" value="100000">  <input nam

  • PHP封装的多文件上传类实例与用法详解

    本文实例讲述了PHP封装的多文件上传类实例与用法.分享给大家供大家参考,具体如下: <?php /**//* * @(#)UploadFile.php * * 可同时处理用户多个上传文件.效验文件有效性后存储至指定目录. * 可返回上传文件的相关有用信息供其它程序使用.(如文件名.类型.大小.保存路径) * 使用方法请见本类底部(UploadFile类使用注释)信息. * */ class UploadFile { var $user_post_file = array(); //用户上传的文件

  • 微信小程序学习笔记之文件上传、下载操作图文详解

    微信小程序学习笔记之文件上传、下载操作图文详解

    本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun

  • Java文件上传与文件下载实现方法详解

    Java文件上传与文件下载实现方法详解

    本文实例讲述了Java文件上传与文件下载实现方法.分享给大家供大家参考,具体如下: Java文件上传 数据上传是客户端向服务器端上传数据,客户端向服务器发送的所有请求都属于数据上传.文件上传是数据上传的一种特例,指客户端向服务器上传文件.即将保存在客户端的文件上传一个副本到服务器,并保存在服务器中. 1.上传表单要求 文件上传要求客户端提交特殊的请求--multipart请求,即包含多部分数据的请求.必须将<form/>标签的enctype属性值设为"multipart/form-d

随机推荐