vue如何根据本地文件路径,上传接口
时间: 2023-08-22 14:08:29 浏览: 196
在vue中,也可以使用类似的方法来上传文件。下面是一个示例代码:
```vue
<template>
<div>
<input type="file" ref="fileInput" @change="uploadFile">
</div>
</template>
<script>
export default {
methods: {
uploadFile() {
const file = this.$refs.fileInput.files[0];
if (!file) {
return;
}
// 创建FormData对象
const formData = new FormData();
formData.append('file', file);
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 监听上传完成事件
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
console.log('文件上传成功');
} else {
console.log('文件上传失败');
}
}, false);
// 发送POST请求
xhr.open('POST', '/upload');
xhr.send(formData);
}
}
}
</script>
```
在这个示例中,我们使用了vue的ref属性来获取文件输入框元素,并监听其change事件。当用户选择文件后,我们使用FormData对象将文件包装成一个表单,并使用XMLHttpRequest对象将文件上传到服务器。在上传完成后,我们监听XMLHttpRequest对象的load事件,判断上传是否成功。在这个示例中,我们假设上传接口的地址为/upload。