vue之axios实现上传图片功能

Vue通过axios可以实现上传图片的功能，具体步骤如下：

        1.在Vue项目中安装axios

npm install axios --save

        2.在需要上传图片的组件中，引入axios和FormData

import axios from 'axios'
import FormData from 'form-data'

        3.绑定上传图片的事件方法

<input type="file" @change="uploadImg">

        4.在方法中处理上传图片的逻辑：

uploadImg(e) {
  let formData = new FormData()
  formData.append('file', e.target.files[0])
  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    console.log(res.data)
  }).catch(error => {
    console.log(error)
  })
}

5.服务器端需要接收上传的图片并处理。

需要注意的是，HTML5的FormData对象，可以简单地打包所有的表单数据（包括文件，文字等）并通过ajax发送到服务器端。在此例子中，我们将文件上传到了/upload路由中。