vue上传文件到服务器
时间: 2023-08-13 22:08:22 浏览: 48
实现文件上传到服务器,可以使用Vue.js配合Axios.js来实现,以下是一个基本的上传文件的代码示例:
HTML部分:
```html
<template>
<div>
<input type="file" @change="onFileChange" ref="fileInput" />
<button @click="submit">上传</button>
</div>
</template>
```
JS部分:
```javascript
<script>
import axios from 'axios'
export default {
data() {
return {
file: null
}
},
methods: {
onFileChange(e) {
this.file = e.target.files[0]
},
submit() {
let formData = new FormData()
formData.append('file', this.file)
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
console.log(res)
})
}
}
}
</script>
```
在上述代码中,我们使用了`FormData`对象来创建一个表单,然后将文件添加到表单中,最后通过Axios.js发送POST请求,将表单数据上传到服务器。在服务器端处理完上传的文件后,可以返回一个响应,前端可以通过`then`方法来处理响应数据。