上传文件

    利用的 file 类型进行文件的选择

    如果选择成功,控制台输出1

    拿到文件路径

    利用event.target.files[0]拿到文件的路径,文件名等数据

    1. handleChange = (e) => {
    2. console.log(file)

    利用 HTML5 定义的读取文件 API 的FileReader方法

    如果加载成功,控制台会输出编码为的文件

    将数据转换为可传输数据

    通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,就可以进行文件的传输

    为了更灵活的发送表单数据(当然也可以用<form>标签进行包裹)我们需要声明一个新的 FormData对象

    1. let formData = new FormData()

    调用 formData 的 append() 方法进行添加文件

    这样保证表单的编码类型为 multipart/form-data

    1. axios.post(` http://yummy.haoduoshipin.com/avatar`, formData)
    2. .catch(err => console.log(err))

    参考