上传文件

初始化项目 upload-test

选择文件

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

  1. handleChange = () => {
  2.   console.log(1)
  3. }
  5. <input type='file' className='file-input' onChange={this.handleChange} />

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

拿到文件路径

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

  1. handleChange = (e) => {
  2.   const file = e.target.files[0]
  3.   console.log(file)
  4. }

选择成功后，控制台输出文件地址，文件名等信息

拿到文件数据

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

  1. handleChange = (e) => {
  2.   const file = e.target.files[0]
  3.   let reader = new FileReader()
  4.   //声明一个 FileReader 对象
  5.   reader.onload = (event) => {
  6.   //当资源及其依赖资源完成加载时，触发 FileReader.onload 属性
  7.     console.log(event.target.result)
  8.   }
  9.   reader.readAsDataURL(file)
  10.   //将读取到的文件编码成Data URL，并触发 onload
  11. }

如果加载成功，控制台会输出编码为base-64的文件

将数据转换为可传输数据

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

因为 axios 不能进行文件的直接进行请求发送，这样我们需要利用 form 来进行数据传输

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

  1. let formData = new FormData()

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

  1. formData.append('avatar', file)
  2. //调用 formData 的 append() 方法添加文件

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

将数据上传

利用 axios 将文件上传发送到服务器

  1. axios.post(` http://yummy.haoduoshipin.com/avatar`, formData)
  2.   .then(res=>{res=>console.log(res.data)})
  3.   .catch(err => console.log(err))

参考