上传文件
利用的 file 类型进行文件的选择
如果选择成功,控制台输出1
拿到文件路径
利用event.target.files[0]
拿到文件的路径,文件名等数据
handleChange = (e) => {
console.log(file)
利用 HTML5 定义的读取文件 API 的FileReader
方法
如果加载成功,控制台会输出编码为的文件
将数据转换为可传输数据
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,就可以进行文件的传输
为了更灵活的发送表单数据(当然也可以用<form>
标签进行包裹)我们需要声明一个新的 FormData对象
let formData = new FormData()
调用 formData 的 append() 方法进行添加文件
这样保证表单的编码类型为 multipart/form-data
axios.post(` http://yummy.haoduoshipin.com/avatar`, formData)
.catch(err => console.log(err))