datalist获取id传到下一个页面_如何在Serverless架构下优雅上传文件？

传统开发中&＃xff0c;文件上传是比较自由的&＃xff1a;上传什么文件、怎么上传、存储到哪里等问题往往都是由开发者决定的&＃xff0c;但是在 Serverless 架构下&＃xff0c;上传文件就没有这么自由了。无论是成本原因&＃xff0c;还是某些服务限制&＃xff0c;我们都需要寻求一些比较 " 优 " 的解决方案。

Serverless 架构与文件上传

由于 Serverless 架构中函数计算的部分是没有办法做文件持久化&＃xff0c;函数执行的容器用完过后就会被回收&＃xff0c;所以如果想要存储文件&＃xff0c;就需要借助对象存储等相关服务。

将文件上传到对象存储服务的方法很多&＃xff0c;本文主要介绍两种&＃xff1a;

• 函数计算 -> 对象存储
• 对象存储

一般情况下&＃xff0c;如果某个有文件上传功能&＃xff0c;我们会用multipart/form-data&＃xff0c;或者将文件进行base64编码之后再上传。但在 Serverless 架构下&＃xff0c;这种思路需要做出一些改变。

函数计算 -> 对象存储是上传文件比较常见&＃xff0c;也是比较容易的方式。文件直接通过 API 网关&＃xff0c;传送到云函数中&＃xff0c;并重做一些处理(例如压缩图像、视频转码、数据入库等)&＃xff0c;然后再由云函数将结果存储到对象存储中&＃xff0c;做文件资源的持久化。

这个思路看起来很顺畅&＃xff0c;但是实际操作起来也会遇到很多问题&＃xff1a;

首先&＃xff0c;通过这种方式将文件传给函数时&＃xff0c;函数计算通过 API 网关得到的数据结构往往是 JSON 格式&＃xff0c;或者是字符串。这样的设计使得函数计算对二进制的支持非常不友好&＃xff0c;我们只能将文件转换为base64编码后再进行传输&＃xff0c;通过 API 网关之后&＃xff0c;函数接收到数据&＃xff0c;再将base64编码的文件解码&＃xff0c;经过相关处理后持久化对象存储。

其次&＃xff0c;无论是 AWS 的 Lambda&＃xff0c;还是腾讯云的 SCF&＃xff0c;通过 API 网关触发函数时都会有数据包大小限制的。以腾讯云为例&＃xff0c;数据包的限制是 6M。也就是说&＃xff0c;无论发送多大的数据&＃xff0c;从 API 网关到函数计算都会有一个数据包的最大限制&＃xff0c;上传文件过大&＃xff0c;就无法进行资源的传输。所以&＃xff0c;上传到云函数的文件必须在 6M 以下&＃xff0c;而函数计算对二进制文件不友好&＃xff0c;经过base64编码的数据包通常会大些&＃xff0c;这样上传到云函数的数据包必须在 4M 左右。

4M 的图片是什么概念呢&＃xff1f;如上图所示&＃xff0c;是我用手机随机拍了一张图片&＃xff0c;大小是 6.21M&＃xff0c;这时我是无法将这张图片上传到 SCF 进行处理的。

除了对文件大小有限制之外&＃xff0c;上述方法对成本也有一定影响&＃xff0c;API 网关并不是一个适合传输文件的方法。我们可以单从流量费用来对比一下对象存储和 API 网关的区别&＃xff1a;

• API 网关的收费&＃xff1a;
• 对象存储的收费&＃xff1a;

单从流量维度来看&＃xff0c;API 网关的费用比 COS 高了许多&＃xff0c;主要原因可能是因为 API 网关更侧重于控制流&＃xff0c;在数据存储传输方面&＃xff0c;对象存储更适合。

那么&＃xff0c;有什么方法可以直接将文件等资源上传到对象存储呢&＃xff1f;这条资源数据又如何入库呢(例如用户上传图片到相册功能&＃xff0c;若使用传统方法&＃xff0c;系统接收到图片之后&＃xff0c;会将数据入库&＃xff0c;但若是将图片直接上传到对象存储&＃xff0c;我们如何得知这个图片是谁给我们的)&＃xff1f;另外&＃xff0c;将文件上传到对象存储需要写入权限&＃xff0c;那么是将权限开发&＃xff1f;还是使用密钥&＃xff1f;如果是一个 Web 服务&＃xff0c;这个密钥信息又应该存储在哪里&＃xff1f;如何存储&＃xff1f;

于是&＃xff0c;就衍生出了第二种解决方法&＃xff1a;

在对象存储方法中&＃xff0c;客户端会发起三个请求&＃xff0c;分别是获取临时上传地址、将文件上传到 COS、获取处理结果。相比于之前的方法&＃xff0c;这个方法会复杂一些&＃xff0c;但是能够很好的支持二进制上传、文件资源的大小以及成本控制。

针对不同场景的的不同适用方案&＃xff1a;

• 场景 1: 用户上传头像功能

针对这样的场景&＃xff0c;直接选用方案 1。

一般情况下&＃xff0c;头像都不会很大&＃xff0c;完全可以在客户端对图像进行一次压缩和裁剪之后&＃xff0c;直接带着用户的参数&＃xff0c;例如 token 等&＃xff0c;上传到函数计算&＃xff0c;在函数计算中将图片转存到对象存储&＃xff0c;将图像和用户信息进行关联&＃xff0c;并将某些结果返回给客户端。整个流程只需要一个函数&＃xff0c;方便快捷。

• 场景 2: 用户上传图片到相册系统中

针对这样的场景&＃xff0c;方案 2 会更好。

如果用户是上传图片到相册&＃xff0c;那么基本都是希望保留原图&＃xff0c;不希望被压缩&＃xff0c;而原图大小很可能会超过 6M&＃xff0c;这时方案 1 就不是特别合理了。使用对象存储方法&＃xff0c;用户可以带着图像要上传的相册以及图片名称&＃xff0c;用户的 token 发起获取临时密钥到函数 1 中&＃xff0c;函数 1 将用户、相册、图片以及状态(例如待上传、待处理、已处理等)等信息关联、存储&＃xff0c;并将临时地址返回给客户端&＃xff0c;客户端将图片上传到对象存储中&＃xff0c;通过对象存储触发器触发函数 2&＃xff0c;函数 2 对图像进行压缩(一般情况下&＃xff0c;相册列表都会显示压缩图片&＃xff0c;点到相册详情才会有完整的无损图片)&＃xff0c;并且和之前信息进行关联&＃xff0c;修改数据状态。在用户上传图片完成之后&＃xff0c;如果有需要&＃xff0c;客户端就可以发起第三次请求获取图像存储 / 处理结果&＃xff0c;函数 3 会查询数据库状态&＃xff0c;在某个时间阈值内&＃xff0c;如果数据状态是完成&＃xff0c;则表示数据已经上传并且完成了部分处理&＃xff0c;否则会返回对应的异常信息。

代码实例

接下来分享上面两种方法的实现过程&＃xff1a;

函数 1&＃xff0c;实现第一种方案&＃xff0c;文件通过 Base64 传递到 SCF&＃xff0c;由 SCF 转存到 COS&＃xff1a;



def uploadToScf(event, context): print(&＃39;event&＃39;, event) print(&＃39;context&＃39;, context) body &＃61; json.loads(event[&＃39;body&＃39;]) # 可以通过客户端传来的 token 进行鉴权&＃xff0c;只有鉴权通过才可以获得临时上传地址 # 这一部分可以按需修改&＃xff0c;例如用户的 token 可以在 redis 获取&＃xff0c;可以通过某些加密方法获取等 # 也可以是传来一个 username 和一个 token&＃xff0c;然后去数据库中找这个 username 对应的 token 是否 # 与之匹配等&＃xff0c;这样会尽可能的提升安全性 if "key" not in body or "token" not in body or body[&＃39;token&＃39;] !&＃61; &＃39;mytoken&＃39; or "key" not in body: return {"url": None} pictureBase64 &＃61; body["picture"].split("base64,")[1] with open(&＃39;/tmp/%s&＃39; % body[&＃39;key&＃39;], &＃39;wb&＃39;) as f: f.write(base64.b64decode(pictureBase64)) region &＃61; os.environ.get("region") secret_id &＃61; os.environ.get("TENCENTCLOUD_SECRETID") secret_key &＃61; os.environ.get("TENCENTCLOUD_SECRETKEY") token &＃61; os.environ.get("TENCENTCLOUD_SESSIONTOKEN") config &＃61; CosConfig(Region&＃61;region, SecretId&＃61;secret_id, SecretKey&＃61;secret_key, Token&＃61;token) client &＃61; CosS3Client(config) response &＃61; client.upload_file( Bucket&＃61;os.environ.get("bucket_name"), LocalFilePath&＃61;&＃39;/tmp/%s&＃39; % body[&＃39;key&＃39;], Key&＃61;body[&＃39;key&＃39;], ) return { "uploaded": 1, "url": &＃39;https://%s.cos.%s.myqcloud.com&＃39; % ( os.environ.get("bucket_name"), os.environ.get("region")) &＃43; body[&＃39;key&＃39;] }

函数 1&＃xff0c;实现第二种方案&＃xff0c;进行临时签名 URL 的获取&＃xff1a;



def getPresignedUrl(event, context): print(&＃39;event&＃39;, event) print(&＃39;context&＃39;, context) body &＃61; json.loads(event[&＃39;body&＃39;]) # 可以通过客户端传来的 token 进行鉴权&＃xff0c;只有鉴权通过才可以获得临时上传地址 # 这一部分可以按需修改&＃xff0c;例如用户的 token 可以在 redis 获取&＃xff0c;可以通过某些加密方法获取等 # 也可以是传来一个 username 和一个 token&＃xff0c;然后去数据库中找这个 username 对应的 token 是否 # 与之匹配等&＃xff0c;这样会尽可能的提升安全性 if "key" not in body or "token" not in body or body[&＃39;token&＃39;] !&＃61; &＃39;mytoken&＃39; or "key" not in body: return {"url": None} # 初始化 COS 对象 region &＃61; os.environ.get("region") secret_id &＃61; os.environ.get("TENCENTCLOUD_SECRETID") secret_key &＃61; os.environ.get("TENCENTCLOUD_SECRETKEY") token &＃61; os.environ.get("TENCENTCLOUD_SESSIONTOKEN") config &＃61; CosConfig(Region&＃61;region, SecretId&＃61;secret_id, SecretKey&＃61;secret_key, Token&＃61;token) client &＃61; CosS3Client(config) response &＃61; client.get_presigned_url( Method&＃61;&＃39;PUT&＃39;, Bucket&＃61;os.environ.get(&＃39;bucket_name&＃39;), Key&＃61;body[&＃39;key&＃39;], Expired&＃61;30, ) return {"url": response.split("?sign&＃61;")[0], "sign": urllib.parse.unquote(response.split("?sign&＃61;")[1]), "token": os.environ.get("TENCENTCLOUD_SESSIONTOKEN")}

HTML 页面基本实现&＃xff1a;

HTML 部分&＃xff1a;



方案 1 上传部分 JS&＃xff1a;



function UpladFileSCF() { var oFReader &＃61; new FileReader(); oFReader.readAsDataURL(document.getElementById("fileScf").files[0]); oFReader.onload &＃61; function (oFREvent) { const key &＃61; Math.random().toString(36).substr(2); var xmlhttp &＃61; window.XMLHttpRequest ? (new XMLHttpRequest()) : (new ActiveXObject("Microsoft.XMLHTTP")) xmlhttp.onreadystatechange &＃61; function () { if (xmlhttp.readyState &＃61;&＃61; 4 && xmlhttp.status &＃61;&＃61; 200) { if (JSON.parse(xmlhttp.responseText)[&＃39;uploaded&＃39;] &＃61;&＃61; 1) { alert(" 上传成功 ") } } } var url &＃61; " https://service-f1zk07f3-1256773370.bj.apigw.tencentcs.com/release/upload/cos" xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/json"); var postData &＃61; { picture: oFREvent.target.result, token: &＃39;mytoken&＃39;, key: key, } xmlhttp.send(JSON.stringify(postData)); } }

方案 2 上传部分 JS&＃xff1a;



function doUpload(key, bodyUrl, bodySign, bodyToken) { var fileObj &＃61; document.getElementById("fileCos").files[0]; xmlhttp &＃61; window.XMLHttpRequest ? (new XMLHttpRequest()) : (new ActiveXObject("Microsoft.XMLHTTP")); xmlhttp.open("PUT", bodyUrl, true); xmlhttp.onload &＃61; function () { console.log(xmlhttp.responseText) if (!xmlhttp.responseText) { alert(" 上传成功 ") } }; xmlhttp.setRequestHeader("Authorization", bodySign); xmlhttp.setRequestHeader("x-cos-security-token", bodyToken); xmlhttp.send(fileObj);} function UpladFileCOS() { const key &＃61; Math.random().toString(36).substr(2); var xmlhttp &＃61; window.XMLHttpRequest ? (new XMLHttpRequest()) : (new ActiveXObject("Microsoft.XMLHTTP")) xmlhttp.onreadystatechange &＃61; function () { if (xmlhttp.readyState &＃61;&＃61; 4 && xmlhttp.status &＃61;&＃61; 200) { var body &＃61; JSON.parse(xmlhttp.responseText) if (body[&＃39;url&＃39;]) { doUpload(key, body[&＃39;url&＃39;], body[&＃39;sign&＃39;], body[&＃39;token&＃39;]) } } } var getUploadUrl &＃61; &＃39;https://service-f1zk07f3-1256773370.bj.apigw.tencentcs.com/release/upload/presigned&＃39; xmlhttp.open("POST", getUploadUrl, true); xmlhttp.setRequestHeader("Content-type", "application/json"); xmlhttp.send(JSON.stringify({ token: &＃39;mytoken&＃39;, key: key, }));}

这里面可以看到获取用户密钥信息的方法是 os.environ.get(“TENCENTCLOUD_SECRETID”)&＃xff0c;想要通过这种方法获取密钥信息&＃xff0c;需要给予函数相关的角色和对角色进行相关的权限&＃xff0c;以 Serverless Framework 为例&＃xff0c;可以使用 tencent-cam-role&＃xff0c;例如创建一个全局组件&＃xff1a;



Conf: component: "serverless-global" inputs: region: ap-beijing runtime: Python3.6 role: SCF_UploadToCOSRole bucket_name: scf-upload-1256773370

然后创建一个增加 Role 的组件&＃xff1a;



UploadToCOSRole: component: "&＃64;gosls/tencent-cam-role" inputs: roleName: ${Conf.role} service: - scf.qcloud.com policy: policyName: - QcloudCOSFullAccess

接下来就是函数的创建&＃xff0c;函数创建时需要绑定刚才的这个 role:



getUploadPresignedUrl: component: "&＃64;gosls/tencent-scf" inputs: name: Upload_getUploadPresignedUrl role: ${Conf.role} codeUri: ./fileUploadToCos handler: index.getPresignedUrl runtime: ${Conf.runtime} region: ${Conf.region} description: 获取 cos 临时上传地址 memorySize: 64 timeout: 3 environment: variables: region: ${Conf.region} bucket_name: ${Conf.bucket_name}

同时将这个函数绑定 APIGW&＃xff1a;



UploadService: component: "&＃64;gosls/tencent-apigateway" inputs: region: ${Conf.region} protocols: - http - https serviceName: UploadAPI environment: release endpoints: - path: /upload/cos description: 通过 SCF 上传 cos method: POST enableCORS: TRUE function: functionName: Upload_uploadToSCFToCOS - path: /upload/presigned description: 获取临时地址 method: POST enableCORS: TRUE function: functionName: Upload_getUploadPresignedUrl

另外&＃xff0c;这个例子还需要一个 COS 存储桶来作为测试使用&＃xff0c;由于 Web 服务可能存在跨域问题&＃xff0c;所以需要对 COS 进行跨域设置&＃xff1a;



SCFUploadBucket: component: &＃39;&＃64;gosls/tencent-cos&＃39; inputs: bucket: ${Conf.bucket_name} region: ${Conf.region} cors: - id: abc maxAgeSeconds: &＃39;10&＃39; allowedMethods: - POST - PUT allowedOrigins: - &＃39;*&＃39; allowedHeaders: - &＃39;*&＃39;

完成之后&＃xff0c;可以快速部署&＃xff1a;



(venv) DFOUNDERLIU-MB0:test dfounderliu$ sls --debug DEBUG ─ Resolving the template&＃39;s static variables. DEBUG ─ Collecting components from the template. DEBUG ─ Downloading any NPM components found in the template. ... ... apis: - path: /upload/cos method: POST apiId: api-0lkhke0c - path: /upload/presigned method: POST apiId: api-b7j5ikoc 15s › uploadToSCFToCOS › done

至此&＃xff0c;我们完成了项目部署&＃xff0c;可以进行测试与适用。

总结

Serverless 可以看作是一个新的技术、新的架构。我们在接触新鲜事物的时候&＃xff0c;或多或少都要有一个适应期&＃xff0c;如何在 Serverless 架构下上传文件&＃xff0c;就是需要适应的部分。我们之前习惯了直接将文件上传到服务器的&＃xff0c;但在接触 Serverless 架构之后&＃xff0c;由于网关 -> 函数对二进制支持和数据包大小问题&＃xff0c;出于安全考虑&＃xff0c;前端不方便直接放密钥信息等问题&＃xff0c;之前简单的事情可能会变得复杂。

作者介绍&＃xff1a;

刘宇&＃xff0c;腾讯 Serverless 团队后台研发工程师。毕业于浙江大学&＃xff0c;硕士研究生学历&＃xff0c;曾在滴滴出行、腾讯科技做产品经理&＃xff0c;本科开始有自主创业经历&＃xff0c;是 Anycodes 在线编程的负责人(该软件累计下载量超 100 万次)。目前投身于 Serverless 架构研发&＃xff0c;著书《Serverless 架构&＃xff1a;从原理、设计到项目实战》&＃xff0c;参与开发和维护多个 Serverless 组件&＃xff0c;是活跃的 Serverless Framework 的贡献者&＃xff0c;也曾多次公开演讲和分享 Serverless 相关技术与经验&＃xff0c;致力于 Serverless 的落地与项目上云。