vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > axios form-data格式传输数据和文件

vue axios form-data格式传输数据和文件方式

作者:寻ing

这篇文章主要介绍了vue axios form-data格式传输数据和文件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

axios form-data格式 传输数据和文件

form-data是在post请求下的一种传输方式,数据会在Form Data中传输,他的格式不是正常的JSON格式传输的,传输的数据由boundary(例子中的------WebKitFormBoundaryRO0YA4pq9oCgwTkt)来分割

------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="id"
undefined
------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="type"
1
------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="name"
......此处省略一堆参数
------WebKitFormBoundaryRO0YA4pq9oCgwTkt--

开始

默认的headers中的Content-Typeapplication/x-www-form-urlencoded,首先要把Content-Type改为

multipart/form-data; boundary={boundary}

boundary找你的后端要)

axios({
    url: "/aaa/bbb",
    method: 'post',
    data: xxx,
    headers: {"Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryn8D9asOnAnEU4Js0" }
})
// 或者在路由拦截中统一修改
service.interceptors.request.use(
req => {
    req.headers = {
        // 'Content-Type': 'application/json',
        'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryn8D9asOnAnEU4Js0',
    }
    return req;
}

FormData

开头处我们说了form-data的传输格式,我们需要使用到formData对象

比如我们需要传输的对象是

{
    name: '小红',
    age: 18,
    file: File {name: "xxx.jpg",...} // 一个图片文件
}

可以先创建一个FormData对象,然后通过.append(key,val)的方式将需要的内容放在FormData对象中,传参时把这个对象传过去就可以了

let formData = new FormData();
formData.append('name','小红');
formData.append('age',18);
formData.append('file',File文件);

传输

整体传输示例

// html
<input type="file" ref="input" />
// js
let formData = new FormData();
formData.append('name','小红');
formData.append('age',18);
formData.append('file',this.$refs.input.files[0]);
let url = '你的请求地址'
axios.post(url,formData,{
    headers:{
        "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryn8D9asOnAnEU4Js0"
    }
})

vue axios与FormData结合提交文件 上传文件

---再利用Vue、axios、FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了。

1.因为使用了new  FormData来操作表单

并且在测试模拟请求时,从消息头里看到的确实是表单提交【Content-Type: multipart/form-data】. 所以就没有单独在设置. 

结果后来加上了这个配置才可以通过了。

这个必须设置:Content-Type: multipart/form-data

2.结合Vue、axios、FormData使用的例子

<template>
     <div id="sample">
        <!--accept定义接收的文件类型,这里只接受图片-->
        <input id="fileinput" @change="uploading($event)" type="file" accept="image/*">
           <button  @click="submit($event)"></button>
     </div>
</template>
<script>
export default {
  name: 'sample',
  data () {
    return {
        file:'',
        src:''
    };
  },
  methods:{
   uploading(event){
   this.file = event.target.files[0];//获取文件
       var windowURL = window.URL || window.webkitURL;
        this.file = event.target.files[0];
        //创建图片文件的url
        this.src = windowURL.createObjectURL(event.target.files[0]);
   },
   submit(){
   event.preventDefault();//取消默认行为
   let formdata = new FormData();
   formdata.append('file',this.file);
//此处必须设置为  multipart/form-data
let config = {
            headers: {
                'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
            }
        };
        this.$http.post('/upload', formData, config).then( (res) => {
       //做处理
    }).catch((error) =>{
    });
   }
  }
};
</script>
<style lang="css" scoped>
</style>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文