axios上传文件_axios上传文件接收不到 - CSDN
精华内容
参与话题
  • axios 实现 文件上传

    万次阅读 2018-12-19 15:32:10
    在一次使用axios中实现文件上传时遇到一个问题。觉得对于上传这方面还不是很了解,就决定好好了解一下这方面的知识。 首先列出问题: 我使用的是FormData实现的上传,因为移动端浏览器版本一般比较高,所以不考虑...

    在一次使用axios中实现文件上传时遇到一个问题。觉得对于上传这方面还不是很了解,就决定好好了解一下这方面的知识。

    首先列出问题:

    我使用的是FormData实现的上传,因为移动端浏览器版本一般比较高,所以不考虑兼容性问题。

    代码是这样的:

    changefile(file){
    	var forms = new FormData()
    	var configs = {
    		headers:{'Content-Type':'multipart/form-data'}
    	};
    	forms.append('file',file.target.files[0])
    				 
        this.axios.post(this.$config.uploadImg,forms ,configs).then(res=>{
    		console.log(res)
    	})
    }

    后台接受的参数也是file。

    因为是上传文件,所以把headers的content-type设为了multipart/form-data,也没毛病,但是测试了发现报错。

    请求体也没有。

    应该是请求体和请求类型不一样吧,请求类型设置的是form-data,请求体应该是一个文件,难道不是文件吗。

    突然想到之前有对axios做过请求拦截,是不是那里改变了请求体。

    axios.interceptors.request.use((config) => {
      Vue.$vux.loading.show({
         text: 'Loading'
      })
      if(config.method  === 'post'){
        if(config.headers['Content-Type'] !== 'application/json'){
          config.data = qs.stringify(config.data);
        }else{
          config.data = config.data;
        }
      }
      return config;
    },(error) =>{
      return Promise.reject(error);
    });

    果然!这里返回了一个对象。把拦截去掉就好了。

    既然问题原因找到了,那么就得想怎么解决了,这里的拦截是对参数进行序列化的,如果不写在这里那么所有的接口请求都得写那岂不是麻烦死。

    看了后发现是不是傻,只有一种情况需要qs序列化,那就是type为application/x-www-form-urlencoded。

    所以只要设置默认type为application/x-www-form-urlencoded

    axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

    然后判断一个就可以了。

    当你需要上传文件时,单独设置type即可,那样就不会进入判断。

    注意:如果不设置axios的默认type,那么axios会自动根据传的参数,来选择使用什么type。

    展开全文
  • axios上传文件

    万次阅读 2019-03-20 10:59:46
    主要是用FormData对象的使用 <template> <div class="cancelRequest"> <div>姓名:<input type="text" v-model="name"></div> <...input type="file" ref="f...

    主要是用FormData对象的使用

    <template>
        <div class="cancelRequest">
            <div>姓名:<input type="text" v-model="name"></div>
            <div>头像:<input type="file" ref="file"></div>
            <div @click="save">保存</div>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                value:''
            }
        },
        components:{},
        props:{},
        watch:{},
        computed:{},
        methods:{
            save(){
                let formData=new FormData();
                formData.append('name',this.name)
                formData.append('img',this.$refs.file.files[0])
                this.axios.post('/api/user/query',formData,{
                    'Content-Type':'multipart/form-data'
                }).then(res=>{
    
                })
            }
        },
        created(){},
        mounted(){}
    }
    </script>
    <style>
    
    </style>

     

    展开全文
  • axios04-文件上传

    2020-04-08 23:43:03
    axios上传文件没有兼容性问题,还是使用以前的FormData 原因: FormData会自动帮你设置请求头为:multipart/form-data; <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf...
    • axios上传文件没有兼容性问题,还是使用以前的FormData
      • 原因: FormData会自动帮你设置请求头为:multipart/form-data;
    <!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>添加英雄</title>
    </head>
    
    <body>
      <form action=""  id="form">
          <input type="text" name="name" placeholder="请输入英雄姓名"><br>
          <input type="text" name="skill" placeholder="请输入英雄技能"><br>
          <input type="file" name="icon" placeholder="请输入英雄头像"><br>
          <button id="btn">提交</button>
      </form>
    
      <script src="./axios.js"></script>
    
      <script>
          /* 
            本小节知识点:axios上传文件(以ajax课程英雄管理器新增英雄为例)
            
            总结: axios上传文件没有兼容性问题,还是使用以前的FormData
            原因: FormData会自动帮你设置请求头为:multipart/form-data;
          */
          btn.onclick = function(e){
              e.preventDefault();
              var fd = new FormData(form);
              axios({
                  url:'http://127.0.0.1:4399/hero/add',
                  method:'post',
                  data: fd,
              }).then(res=>{
                  //成功回调
                  console.log(res)
              });
          }
      </script>
    </body>
    
    </html>
    
    展开全文
  • 一、Axios的常用方法 安装 使用npm npm install axios 引入axios import axios from 'axios'; 执行get请求 get方法一 get(url) //url请求地址 .then(res=>{ console.log("请求成功时",res) //请求成功是返回...

    一、Axios的常用方法

    安装

    使用npm

    npm install axios -S
    
    npm install qs -S
    

    引入axios,qs.js

    import axios from 'axios';
    import qs from 'qs';
    

    qs是一个url参数转化(parse和stringify)的js库。
    是在使用axios时,用于给post方法编码,
    qs.parse 方法可以把一段格式化的字符串转换为对象格式
    qs.stringify 则和 qs.parse 相反,是把一个参数对象格式化为一个字符串。

    执行get请求

    get方法一

    get(url)
    //url请求地址
    .then(res=>{
    console.log("请求成功时",res)
    //请求成功是返回数据
    })
    .catch(err=>{
    console.log("请求失败",err)
    //请求失败返回原因
    })
    

    get方法二

    get(url,{parmams:{key1:value,key2:value2}})
    .then(res=>{
    console.log("请求成功时",res);
    //请求成功是返回数据
    })
    .catch(err=>{
    console.log("请求失败",err);
    //请求失败返回原因
    })
    

    params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。

    执行post请求

    post方法一

    //请求序列化数据(urlencoded 方式)
    post(url,k1=v1&k2=v2,{header:{"Content-Type: application/x-www-form-urlencoded; charset=UTF-8"}}
    )
    .then(res=>{
    	console.log("请求成功时",res);
    	//请求成功是返回数据
    })
    .catch(err=>{
    	console.log("请求失败",err);
    	//请求失败返回原因
    })
    

    如果Content-Type设置为“application/x-www-form-urlencoded;charset=UTF-8”无论是POST请求还是GET请求都是可以通过这种方式成功获取参数,但是如果前端POST请求中的body是Json对象的话,会报上述错误。

    post方法二

    //请求Json对象
    post(
    url,
    {k1:v1,k2:v2}
    )
    .then(res=>{
    	console.log("请求成功时",res)
    	//请求成功是返回数据
    })
    .catch(err=>{
    	console.log("请求失败",err)
    	//请求失败返回原因
    })
    //
    
    

    post方法三

    //file文件
    post(
    url,
    formData
    )
    .then(res=>{
    	console.log("请求成功时",res)
    	//请求成功是返回数据
    })
    .catch(err=>{
    	console.log("请求失败",err)
    	//请求失败返回原因
    })
    

    FormData的主要用途有两个:
    1、将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。
    2、异步上传文件。

    具体urlencoded 方式/json数据格式如下(qs的用法)

    // urlencoded 方式
    			 getMovies(){
    				 var data = {
    					areaId:50,
    					typeId:0,					
    					initial:'',
    					pageIndex:1,
    					pageSize:10,
    					MethodName:"BoxOffice_GetMovieData_List"
    				};
    				this.$http.post(
    				"http://www.endata.com.cn/API/GetData.ashx",
    				qs.stringify(data),
    				{
    				headers:{"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}
    				})
    				.then(res=>{
    					console.log("post电影数据",res);
    				})
    				.catch(err=>{
    					console.log("错误信息",err);
    				})
    				// json数据格式
    				/* this.$http.post("http://www.endata.com.cn/API/GetData.ashx",{
    					areaId:50,
    					typeId:0,					
    					initial:'',
    					pageIndex:1,
    					pageSize:10,
    					MethodName:"BoxOffice_GetMovieData_List"
    				})
    				.then(res=>{
    					console.log("post电影数据",res);
    				})
    				.catch(err=>{
    					console.log("错误信息",err);
    				}) */
    				
    			 },	
    

    二、Axios如何实现上传文件

    <template>
    	<div>
    		<h1>首页</h1>
    		<div v-if="pics.length">
    			<img :src="'http://www.520mg.com'+item" v-for="item in pics" width="100" alt="">
    		</div>
    		<div>
    			<label class="label">
    				<input type="file" ref="file" @change="up()"> + 
    				<span class="before" :style="{width:pre+'%'}"></span>
    			</label>
    		</div>
    		
    	</div>
    </template>
    <script>
    	import axios from 'axios';
    	import qs from 'qs';
    	export default{
    		data(){
    			return {pics:[],pre:0}
    		},
    		created(){
    		},
    		methods:{
    			// 文件、图片上传
    			up(){
    				var that = this;
    				// 获取到this 赋值个that
    				var file = this.$refs.file.files[0];
    				
    			     if(!file){return} // 如果没有文件就返回
    				// 拿到上传的文件
    				var data = new FormData();
    				// 创建一个表单数据
    				data.append("file",file);
    				console.log("ASas",data)
    				// 把图片或文件添加到data
    				axios.post(
    				"https://www.520mg.com/ajax/file.php",
    				data,
    				// 第1个参数 url 第二参数 data数据,第三个是配置渲染,
    				// onUploadProgress 当上传进度是
    				{onUploadProgress:e=>{
    					 
    					that.pre =Math.floor(e.loaded/e.total*100);
    					// e.loaded 已经上传的字节数据,e.total 字节数据  转换为1-100的比例值 赋值个pre	 
    				}}
    				)
    				.then(res=>{
    					console.log(res);
    					if(res.data.error==0){
    						// 如果错误为0
    						this.pics.push(res.data.pic);
    						// 把图片加入到图片pics数组
    					}
    					this.$refs.file.value="";
    					// 清空表单数据
    					this.pre = 0;
    					// 清空上传进度数据
    				})
    			},
    		}
    
    
    /* 设置宽高,颜色 文字内容信息  相对定位 */
    	.label .before{
    		position: absolute;
    		left:0;
    		bottom:0;
    		content: "";
    		display: inline-block;
    		height: 2px;
    		width: 0%;
    		background-color: orange;
    	}
    	/* 绝对定定位  宽度默认0%  底部橙色的进度条*/
    	.label input{ display: none;}
    	/* 被lable包裹的input 单击input 和单击 label效果一致 ,把input隐藏 */
    
    展开全文
  • 使用axios上传文件、下载(导出)文件

    千次阅读 2019-05-25 15:06:57
    上传文件 上传文件需要将请求头的Content-Type设置为multipart/form-data let file = e.target.files[0]; let data = new FormData(); //创建form对象 data.append('file',file);//通过append向form对象添加数据 ...
  • axios 上传和下载文件

    2020-04-13 11:35:42
    文章目录文章参考前台 axios 上传下载FormData 介绍axios 上传文件步骤构造formData请求头的配置`multipart/form-data`axios发送请求axios 下载文件综合案例后台定义上传和下载前端axios上传下载 文章参考 FormData...
  • vue+axios上传文件

    万次阅读 2018-01-11 16:34:36
    vue+axios上传文件
  • 1、用js的formData对象上传(服务器返回url地址) <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> methods: { update(e){ let file = e....
  • 在使用axios进行上传文件的坑

    万次阅读 2018-06-15 16:50:24
    在使用axios进行文件上传时,后台的grails程序经常或出现不能获取file的情况 No signature of method No signature of method: org.springframework.security.web.servletapi.HttpServlet3RequestFactory$Servlet3...
  • axios 封装上传文件的请求

    千次阅读 2018-02-28 15:41:58
    axios 和 ajax 都支持异步请求,两者使用方法大同小异,在此使用 axios 上传文件的请求。使用的时候只需要在响应的 vue 组件中引入就可以。import Vue from 'vue'; import VueCookie from 'vue-cookie'; import ...
  • 文件批量上传 使用axios实现

    千次阅读 2018-07-10 19:49:53
    addDialogCB (data) { // 如有数据 判定点确认 if (data) { this.showType = 'table' var formData = new FormData() formData.append('fileType', 0) formData.app...
  • axios 进行文件上传

    千次阅读 2018-04-01 21:48:03
    async uploadFile () { var config = { onUploadProgress: (progressEvent) =&gt; { let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) /...
  • https://segmentfault.com/a/1190000012487177
  • Vue用axios实现TinyMCE的图片上传功能

    千次阅读 2018-04-08 14:23:44
    Vue用axios插件实现TinyMCE的图片上传功能 最近工作用到富文本编辑器,通过各种对比选择了TinyMCE编辑器。 在配置方面参考了这篇文章vue项目移植tinymce踩坑, 对原文作者表示感谢。 同时,因为项目中使用axios...
  • 异步上传文件FromData+axios

    千次阅读 2018-05-17 17:33:45
    axios文档 let formData = new FormData() formData.append('file',e.target.files[0]) this.$axios({ url:url, method: 'post', data: formData, processData: false,// 告诉axios不要去处理发送...
  • axios+formdata 上传文件

    千次阅读 2019-06-01 10:07:38
    最近项目要做文件上传,作为萌新表示这种操作有点鸭梨,知之为知之不知百度知,好吧百度说formdata 好那我们就动手了 首先照着formdata文档来先new 一个对象 let formData = new FormData() formData.append('xxx'...
  • VUE 更好的 ajax 上传处理 axios.js

    千次阅读 2017-03-30 08:43:27
    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。 首先就是引入axios,如果你使用es6,只需要安装axios模块之后 import axios from 'axios'; //...
  • 萌新用vue + axios + formdata 上传文件的爬坑之路

    万次阅读 多人点赞 2018-06-27 22:08:13
    最近项目要做文件上传,作为萌新表示这种操作有点鸭梨,知之为知之不知百度知,好吧百度说formdata 好那我们就动手了首先照着formdata文档来先new 一个对象let formData = new FormData() formData.append('xxx', '...
  • 具体的问题相信大家已经懵逼到无语伦比了。 后端项目:SpringBoot 如果大家暂时找不到解决方案,可是试试我哒!若是有好的解决方案,请大佬给出自己的方案,方便的话共享下,评论私信给我都行哒!...
  • axios上传formdata失败以及nodejs接受formdata失败今天用nodejs写一个上传图片的功能,因为这个功能是用在vue中的。我首先在nodejs服务器上用jquery的ajax写好了这个功能,可是移植到vue中却出现了问题。 下面来说...
1 2 3 4 5 ... 20
收藏数 6,075
精华内容 2,430
关键字:

axios上传文件