表单数据上传至华为云OBS前端代码
npm install
本前端demo准备了两种表单上传方式
准备表单HTML页面,配置AK、OBS桶名、OBS域名,并将生成的请求参数填入HTML页面。
/api-xxx 请求用于从服务端获取 signature/policy 等信息。
上传成功页面,上传成功后会跳转到 success_action_redirect
参数中填写的地址,此页面可从 location.search 中获取成功返回的参数。同时,后端项目中生成 policy 时也需要加入 success_action_redirect
参数。
即通过Ajax
由于OBS以桶为单位提供基于HTTP/HTTPS协议的分布式存储服务, 而浏览器默认不允许Ajax跨域请求,所以我们先配置桶的CORS以支持Ajax跨域访问(下图为通过控制台配置)。可参考 配置桶的CORS
获取policy和signature;通过OBS桶名、域名拼接obs上传路径。
准备表 JavaScript 模块,配置AK、OBS桶名、OBS域名,并将生成的请求参数放入 FormData 对象。
页面使用Ajax
后端服务器未设置允许跨域,所以在本地使用了代理
配置后端路径和端口:
npm start
后端代码参考:https://gitee.com/HuaweiCloudDeveloper/OBSFormUploadDemo-backend
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。