开发者社区> 问答> 正文

前端直传怎么实现,请给出相应代码?

前端直传怎么实现,请给出相应代码?

展开
收起
河水流流 2024-08-17 17:51:48 45 0
1 条回答
写回答
取消 提交回答
  • 前端直传实现步骤简述及代码示例:

    1. 准备工作: 确保已在阿里云OSS控制台获取AccessKeyIdAccessKeySecret。设置Bucket的CORS规则允许前端域名访问。配置STS服务,为前端应用获取临时安全凭证。
    2. 前端集成OSS SDK: 使用OSS JavaScript SDK,通过NPM安装或直接CDN引入至项目。
    3. 生成STS临时凭证:在后端服务器创建接口(如/get_sts_token),返回包含AccessKeyId、AccessKeySecret、SecurityToken的STS临时凭证。
    4. 前端代码示例javascript // 引入OSS SDK const OSS = require('ali-oss'); async function uploadFile(file) { // 从后端获取STS临时凭证 const stsResponse = await fetch('/get_sts_token'); const { accessKeyId, accessKeySecret, securityToken } = await stsResponse.json(); // 初始化OSS客户端 const client = new OSS({ region: '', bucket: '', accessKeyId, accessKeySecret, stsToken: securityToken, }); try { // 上传文件 const result = await client.put(file.name, file); console.log('Upload success:', result.url); } catch (err) { console.error('Upload failed:', err); } } // 文件选择后触发上传 document.getElementById('fileInput').addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { uploadFile(file); } }); 请注意替换为实际的Bucket区域和名称。此示例展示了如何在用户选择文件后,使用从后端获取的STS临时凭证上传文件至OSS。

    参考链接:
    Java安装https://help.aliyun.com/zh/oss/developer-reference/java-installation

    2024-08-17 22:24:15
    赞同 4 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
阿里文娱大前端技术实践 立即下载
前端代码是怎样智能生成的 立即下载