如何通过Web端直传文件(Object)到OSS
### Web端上传OSS介绍 > 用户在浏览器或App端上传文件到应用服务器,应用服务器再把文件上传到OSS。具体流程如下图所示。 ![](https://oss.nodekoa.com/mukang/blog/2022/04/29/56WA-Bh5K80XKS2FqjFU8.png) 和数据直传到OSS相比,以上方法存在以下缺点: - 上传慢:用户数据需先上传到应用服务器,之后再上传到OSS,网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转,而是直传到OSS,速度将大大提升。而且OSS采用BGP带宽,能保证各地各运营商之间的传输速度。 - 扩展性差:如果后续用户数量逐渐增加,则应用服务器会成为瓶颈。 - 费用高:需要准备多台应用服务器。由于OSS上行流量是免费的,如果数据直传到OSS,将节省多台应用服务器的费用。 > 本文主要介绍如何基于Post Policy的使用规则在服务端通过各种语言代码完成签名,然后通过表单直传数据到OSS。由于服务端签名直传无需将AccessKey暴露在前端页面,相比JavaScript客户端签名直传具有更高的安全性。 ![](https://oss.nodekoa.com/mukang/blog/2022/04/29/OBb_a56VsD30Q-lahju6e.png) 1. 用户向应用服务器请求上传Policy和回调。 ```javascript let params = { "expire": "xxx", "policy": "xxx", "signature": "xxx", "accessid": "xxx", "host": "xxx", "dir": "xxx" }; axios.get('/getOssParams').then(result=>{ params = result.data }) ``` 2. 应用服务器返回上传Policy和签名给用户。 ```javascript var dayjs = require('dayjs'); var crypto = require('crypto'); var nanoid = require('nanoid'); var config = { dirPath: "upload/", bucket: "xxx", region: "xxxx", accessKeyId: "xxxx", accessKeySecret: "xxxxx", expAfter: 1000*60*5, // 签名失效时间,毫秒 maxSize: 1024*1000*1024*10, // 文件最大的 size B } // 过期时间 const expire = new Date().getTime() + config.expAfter; const expiration = new Date(expire).toISOString(); const dir = config.dirPath +dayjs().format('YYYY/MM/DD') + "/" + nanoid.nanoid() // 上传文件名 const policyString = JSON.stringify({ expiration, conditions: [ ["content-length-range", 0, config.maxSize], ["starts-with", "$key", dir], ], }); const policy = Buffer.from(policyString).toString("base64"); const signature = crypto .createHmac("sha1", config.accessKeySecret) .update(policy) .digest("base64"); //返回参数 const params = { expire, policy, signature, accessid: config.accessKeyId, host: "https://oss.nodekoa.com", dir, }; ``` 3. 用户直接向OSS发送文件上传请求。 ```javascript const files = document.querySelector('input[type="file"]') var formData = new FormData(); const suffix = files[0].name.slice( files[0].name.lastIndexOf(".") ); const filename = Date.now() + suffix; formData.append("key", params.dir + "/" + filename); formData.append("policy", params.policy); formData.append("OSSAccessKeyId", params.accessid); formData.append("success_action_status", "200"); formData.append("signature", params.signature); formData.append("file", files[0]); axios .post(params.host, formData, { headers: { "Content-Type": "multipart/form-data" }, onUploadProgress: function (progressEvent) { console.log("进度", progressEvent.loaded / progressEvent.total); }, }) .then((result) => { console.log("result.data ===== ", params.hosts + '/' + params.dir + filename); }); ```
博客描述
OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。
kitourf
Although there are biological reasons to suspect that raloxifene should have similar benefits, trial data currently are limited to one study in which the primary outcome was fracture prevention <a href=http://cialiss.sbs>generic cialis 20mg</a>
guxulty
Ureaplasma urealyticum and Ureaplasma parvum are the main species identified as pathogenic and were identified in 1999 2 <a href=http://cial.sbs>cialis 10mg</a>