uniapp 前端阿里云oss 图片上传

### UniApp 使用阿里云 OSS 实现图片上传的方法 #### 准备工作 为了使UniApp能够顺利地将图片上传到阿里云OSS，在项目初始化阶段需完成如下配置： - 注册并登录阿里云账号，创建对应的Bucket资源，并记录下Endpoint、AccessKeyId以及AccessKeySecret等必要参数。 - 安装`aliyun-oss-js-sdk`库以便于操作OSS服务。 安装命令如下所示： ```bash npm install aliyun-oss-js-sdk --save ``` #### 获取临时Token 考虑到安全性因素，通常不会直接把Access Key暴露给客户端应用。因此推荐通过服务器端接口向阿里云申请一个短期有效的STS Token用于前端请求认证[^2]。 #### 图片上传流程设计 当用户选择好要上传的照片之后，应用程序会先对该照片添加水印处理再执行上传动作；整个过程可以在不依赖任何后台支持的情况下由前端独立完成。具体步骤包括但不限于读取本地文件流、绘制带有指定样式的Canvas图形作为最终待保存的数据对象等等[^1]。 #### 示例代码展示 下面是一份完整的示例代码片段，展示了如何利用上述提到的技术要点构建起一套简易却实用的图片上传机制： ```javascript import OSS from 'ali-oss'; // 初始化Client实例 const client = new OSS({ region: '<YourRegion>', // 如 oss-cn-hangzhou accessKeyId: '<YourAccessKeyId>', accessKeySecret: '<YourAccessKeySecret>', stsToken: '<YourStsToken>', // 如果使用了 STS，则需要提供该字段 bucket: '<YourBucketName>' }); async function uploadImageWithWatermark(filePath) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 加载原始图像 const img = new Image(); img.src = filePath; await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; }); // 设置画布大小等于原图尺寸 canvas.width = img.width; canvas.height = img.height; // 绘制带水印效果的新图像 ctx.drawImage(img, 0, 0); drawWaterMark(ctx); // 自定义函数负责实际渲染逻辑 // 将 Canvas 转换成 Blob 对象准备上传 const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg') ); try { const result = await client.put('<ObjectName>.jpg', blob); console.log(`Upload succeeded! URL=${result.url}`); return result.url; } catch (error) { console.error('Failed to upload image:', error.message); } } function drawWaterMark(context){ context.font="30px Arial"; context.fillStyle="#FFFFFF"; context.globalAlpha=0.5; context.fillText("Sample Water Mark",context.canvas.width*0.7,context.canvas.height*0.9); } ``` 这段脚本首先引入了必要的SDK包，接着定义了一个异步方法用来接收来自用户的媒体文件路径作为输入参数。内部实现了基于HTML5 Canvas API的操作来合成一张新的含有所谓“水印”的JPEG格式图片，并将其转换成适合网络传输的形式提交给远端服务器进行持久化存储。最后还附上了简单的文字样式定制辅助工具供开发者进一步调整细节之处[^3]。