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请求,提交图片类型表单数据方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决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异步使用echarts的方法

    在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 中提交表单数据(含上传文件)

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

  • 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,数据很多事异步获取来的,如果在template直接使用,会报错,undefined. 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式... created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001

  • vue axios 表单提交上传图片的实例

    项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag

  • 让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

  • 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)

    解决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请求

    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

随机推荐