使用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.apply("上传的key值",flie);axios.post('上传Url',formData,{'Content-type' : 'multipart/form-data'}).then(res=>{// 上传成功后的处理},err=>{// 出现错误时的处理})  }
}
<script>