
88
|
第
8
章
exports.api.vacationPhotoContest = (req, res, fields, files) => {
console.log('field data: ', fields)
console.log('files: ', files)
res.send({ result: 'success' })
}
8.8
提升文件上传的
UI
浏览器内建的用于文件上传的
<input>
控件从
UI
的角度来看可以说很简陋。你可能见过外
观更吸引人的拖放界面和上传按钮。
好消息是,你在这里所学到的东西可以应用到大部分流行的“高级”文件上传组件上。归
根结底,大部分组件的表单上传机制是一样的,只是在其基础上加上了漂亮的外观。
下面列出了几个最流行的文件上传前端组件:
• jQuery File Upload
• Uppy
(它有个好处,就是支持多个上传目标)
• file-upload-with-preview
(它给了你完全的控制
。你可以访问文件对象数组,可以用它构
造用于
fetch
的
FormData
对象)
8.9
小结
本章学习了表单处理的各种技术。我们探索了传统的由浏览器来处理表单的方式(让浏览
器发起一个
POST
请求,把表单内容发送到服务器,并渲染服务器返回的响应,这响应通常
是一个重定向),也探索了采用得越来越多的方式,即避免浏览器提交,自己用
fetch
来处
理表单。
我们了解了表单编码的以下几种常见方式。
application/x-www-form-urlencoded ...