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>

```

 

轉發源：
作者：johe_jianshu
鏈接：https://www.jianshu.com/p/84e94cc446c0
來源：簡書