前端如何上传file类型参数
时间: 2024-05-04 16:20:30 浏览: 16
前端上传 `file` 类型参数通常使用 `FormData` 对象。以下是一个简单的示例:
HTML:
```html
<form id="uploadForm">
<input type="file" name="file">
<button type="submit">上传</button>
</form>
```
JavaScript:
```javascript
const form = document.getElementById('uploadForm');
const fileInput = document.querySelector('input[type="file"]');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => {
console.log('上传成功');
})
.catch(error => {
console.error('上传失败', error);
});
});
```
在上面的示例中,我们首先获取表单元素和文件输入元素。然后,我们监听表单的提交事件,并通过 `FormData` 对象创建一个表单数据对象,将文件添加到其中。最后,我们使用 `fetch` 函数将表单数据提交到后端。