使用axios进行文件上传

前期需要了解的一些知识

• 此方法主要是使用FormData数据进行文件的上传；FormData是XMLHttpRequest Level2提供的一个接口对象，提供了一种表单数据的键值对的构造方法，经过它的数据处理可以使用XMLHttpRequest.send( )方法送出；如果送出时的编码类型被设为"multipart/form-data"，会使用和表达一样的格式；
• 使用FormData实例的append()方法或set()方法设置数据，其中append与set区别在于，一个是不会覆盖原值，只添加新值。一个是会覆盖原值
• 使用input设置type=filte来接受上传的文件，通过change事件的event对象获取上传的文件对象

示例：

<template>
    <div> 
        <input type = "flie" @change = "Upload" />
    <div>
</template>

<script>
export default {
    data(){
        return{
        }
    },
    methods:{
         Upload(event){
            const flie = event.target.files[0];
            // 在这里进行一系列的校验
            const formData = new FormData();
            formData.append("上传的key值",flie);
            axios.post('上传Url',formData,{
                'Content-type' : 'multipart/form-data'
            }).then(res=>{
                // 上传成功后的处理
            },err=>{
                // 出现错误时的处理
            })  
         }
}
<script>

当需要传递多个文件时，比如文件数组，那么可以使用同一个key，将多个文件一一apply进去