俺将解释如何使用fetch实现这个功能。
假设你有一个带有文件输入字段的表单:
<input type="file" id="fileUpload" />
监听change事件:
document.querySelector('#fileUpload').addEventListener('change', event => {
handleImageUpload(event)
})
我们在handleImageUpload()函数中处理我们的主要逻辑:
const handleImageUpload = event => {
const files = event.target.files
const formData = new FormData()
formData.append('myFile', files[0])
fetch('/saveImage', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data)
})
.catch(error => {
console.error(error)
})
}
在本例中,我们使用的是/saveImage后端地址。
我们初始化一个新的FormData对象,并将其赋给FormData变量,然后在那里附加上传的文件。如果有多个文件输入元素,就会有多个append()调用。
第二个then()中的数据变量将包含解析后的JSON返回数据。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。