axios发送post请求,提交图片类型表单数据方法
DOME
<input type="file" @change="upload" ref="upload">
接口
const userUploadAtt = (File,config) => axios.post("接口",File,config)
处理数据
let input = this.$refs.upload 创建一个空的FormData对象 let data = new FormData(); 使用FormData.append来添加键/值对到表单里面; data.append('file', input.files[0]); upload(){ userUploadAtt(data,{headers: {'Content-Type': 'multipart/form-data'}}).then((response)=>{ this.headPhoto = response.data[0].msg.url; }).catch(()=>{ }) }
注意:
如果
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' post请求时候表单上传不需要引入qs.stringify()
以上这篇axios发送post请求,提交图片类型表单数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue异步axios获取的数据渲染到页面的方法
我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined. 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式... created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001
-
让axios发送表单请求形式的键值对post数据的实例
想要发送键值对,其实是需要做响应处理的,直接上代码 npm install --save axios vue-axios qs qs是必不可少的插件,安装完成后,在main.js插入一下代码 //载入axios import Qs from 'qs' import axios from 'axios' import VueAxios from 'vue-axios' var axios_instance = axios.create({ baseURL:'http://localhost', t
-
在vue中通过axios异步使用echarts的方法
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据. 一. 实现异步加载数据 (一)引入vue-resource 通过npm下载axios //命令行中输入 npm install axios --save 在main.js中引入axios并注册 // main.js
-
vue axios 表单提交上传图片的实例
项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的 multipart/form-data 接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag
-
vuejs使用axios异步访问时用get和post的实例讲解
script中. let data={....}; let url=xx; 方法各异: GET: this.$ajax.get(url,{ params:data }) .then(function (res) { console.log(res.data) }) .catch(function (error) { console.log(error) }) POST: 方法一:1. //请求后台数据之前转换入参 let url = xx; let data = { uname:this.una
-
解决vue跨域axios异步通信问题
在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求数据,但不少人遇到如下问题: •异步通信,无法同步执行 •无法集中管理 •不便阅读 •还未请求成功就调转了 •then里面的逻辑越来越繁杂 以往的网络请求的写法如下: // main.js // 引入axios import axios from 'axios' Vue.prototype.$axi
-
axios异步提交表单数据的几种方法
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半钟头找到了答案 axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Form Data格式)是不一样的,在下面列举 默认格式Request Payload 直接使用axios发送异步请
-
Vue axios 中提交表单数据(含上传文件)
我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport
-
axios发送post请求,提交图片类型表单数据方法
DOME <input type="file" @change="upload" ref="upload"> 接口 const userUploadAtt = (File,config) => axios.post("接口",File,config) 处理数据 let input = this.$refs.upload 创建一个空的FormData对象 let data = new FormData(); 使
-
使用axios发送post请求,将JSON数据改为form类型的示例
通常前端通过POST请求向服务器端提交数据格式有4中,分别是"application/x-www-form-urlencoded"格式." multipart/form-data"格式."application/json"格式和"text/xml"格式.通常最常见的是"application/json"格式,也就是通过JSON字符串形式. 在控制台看到的数据就是这样: 有的时候后台需要Form形式的数据才能
-
解决axios发送post请求上传文件到后端的问题(multipart/form-data)
目录 项目场景: 问题描述 原因分析: 解决方案: 项目场景: 后端:实现了一个文件上传服务接口,可以接收前端传递过来的MultipartFile文件,并存储到服务器本地中.前端:获取type为file的<font>标签中的文件,使用axioshttp请求库,发送post请求,将文件发送给后端. 问题描述 在js中发送上传文件请求的常规代码如下: new一个FormData对象,使用append方法将文件添加到表单中 FormData专门用于js中发送multipart/form-data格式
-
在vue项目中使用axios发送post请求出现400错误的解决
目录 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 总结了错误的几个原因 vue axios400 Bad Request问题 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 1.bad request:“错误的请求" 2.invalid hostname:"不存在的域名” 我报的错是第一种bad request 总结了错误的几个原因 1.请求头错误,前端请求头的content-type和后端不一致 axios默认的请求头的
-
httpclient模拟post请求json封装表单数据的实现方法
废话不说上代码: public static String httpPostWithJSON(String url) throws Exception { HttpPost httpPost = new HttpPost(url); CloseableHttpClient client = HttpClients.createDefault(); String respContent = null; // json方式 JSONObject jsonParam = new JSONObject(
-
axios发送post请求springMVC接收不到参数的解决方法
axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded. 解决方法有以下三种: 1.设置axios的默认请求头 //设置全局的 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; var instance = a
-
解决axios发送post请求返回400状态码的问题
今天在用 axios 发送一个跨域的post请求时,遇到了一个坑:Uncaught (in promise) Error: Request failed with status code 400. 前台代码如下: axios({ method: "post", url: "http://localhost:8080/employee/testpost", data: { username: '234234', password: '4565' } }).then((
-
vue cli3 项目中如何使用axios发送post请求
目录 使用axios发送post请求 首先需要安装对应的第三方包 发送post请求 发送get请求将index.js中再添加如下代码 vue使用axios的踩坑记录 axios跨域 解决方法 axios发起post请求后端无法接收数据 使用axios发送post请求 react 同样适用 首先需要安装对应的第三方包 cnpm i -S axios cnpm i -S lodash 然后在做下边的 在vue 项目中创建一个这样的文件目录 发送post请求 index.js中的文件内容是:
-
Java发送http请求的示例(get与post方法请求)
package com.jiucool.www.struts.action; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.File; import java.io.FileReader; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURLConnect
-
python通过get,post方式发送http请求和接收http响应的方法
本文实例讲述了python通过get,post方式发送http请求和接收http响应的方法.分享给大家供大家参考.具体如下: 测试用CGI,名字为test.py,放在apache的cgi-bin目录下: #!/usr/bin/python import cgi def main(): print "Content-type: text/html\n" form = cgi.FieldStorage() if form.has_key("ServiceCode") a
随机推荐
- Erlang实现的一个Web服务器代码实例
- 如何查询占CPU高的oracle进程
- Angular2库初探
- ASP.NET Web.config配置文件详解
- asp.net内置对象 Response对象使用介绍
- MVC4制作网站教程第四章 部分栏目功能实现代码
- JS判断一个数是否是水仙花数
- python开发环境PyScripter中文乱码问题解决方案
- php防止sql注入的方法详解
- IIS6.0的默认权限和用户权限设置小结
- IE/FireFox具备兼容性的拖动代码
- MySQL高级查询之与Group By集合使用介绍
- jquery使用jquery.zclip插件复制对象的实例教程
- java转发和重定向的区别
- Android编程使用Intent传递对象的方法分析
- Android实现疯狂连连看游戏之实现游戏逻辑(五)
- 人生感悟之智者的回答
- vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
- linux中Centos7的LVM磁盘扩容问题
- Java判断List中有无重复元素的方法