前端如何根据本地文件路径,上传接口
时间: 2024-01-02 12:02:39 浏览: 43
前端可以使用HTML5提供的File API来获取本地文件,并通过XMLHttpRequest对象将文件上传到服务器。
以下是一个示例代码:
```javascript
// 获取文件输入框元素
var fileInput = document.getElementById('file-input');
// 监听文件选择事件
fileInput.addEventListener('change', function () {
var file = fileInput.files[0];
if (!file) {
return;
}
// 创建FormData对象
var formData = new FormData();
formData.append('file', file);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听上传完成事件
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
console.log('文件上传成功');
} else {
console.log('文件上传失败');
}
}, false);
// 发送POST请求
xhr.open('POST', '/upload');
xhr.send(formData);
}, false);
```
在上面的示例代码中,我们首先获取文件输入框元素并监听其change事件。当用户选择文件后,我们使用FormData对象将文件包装成一个表单,并使用XMLHttpRequest对象将文件上传到服务器。在上传完成后,我们监听XMLHttpRequest对象的load事件,判断上传是否成功。在这个示例中,我们假设上传接口的地址为/upload。