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路由中。