uniapp图片OSS上传
时间: 2025-01-09 08:47:16 AIGC 浏览: 90
### UniApp 实现图片上传至阿里云 OSS
#### 准备工作
为了使 UniApp 应用能够直接从前端上传图片到阿里云 OSS,需先获取必要的配置参数。这些参数通常由开发者通过安全的方式提供给应用,比如在构建阶段注入环境变量。
- **AccessKeyId**: 访问密钥 ID
- **AccessKeySecret**: 访问密钥 Secret
- **BucketName**: 存储空间名称
- **RegionEndpoint**: 地域节点地址
- **Policy**: 策略文本,用于指定允许的操作范围以及过期时间等信息
- **Signature**: 数字签名,用来验证请求合法性[^1]
#### 配置 Aliyun OSS SDK
确保已引入 `aliyun-oss` 或者适合前端使用的轻量化版本库来处理与 OSS 的交互逻辑。对于 UniApp 来说,推荐使用官方提供的适用于浏览器环境下的 SDK。
```javascript
// main.js 中全局注册 oss 对象以便于各页面调用
import OSS from 'ali-oss';
const client = new OSS({
region: '<Your Region Endpoint>',
accessKeyId: '<Your Access Key Id>',
accessKeySecret: '<Your Access Key Secret>',
bucket: '<Your Bucket Name>'
});
Vue.prototype.$ossClient = client;
```
#### 页面实现代码
下面是一个简单的例子展示如何让用户选择一张照片并通过上述设置好的客户端实例将其发送到阿里云服务器上:
```html
<template>
<view class="container">
<!-- 文件输入框 -->
<input type="file" @change="handleFileChange"/>
<!-- 提交按钮 -->
<button @click="uploadImage">Upload</button>
<!-- 显示进度条或其他反馈信息的地方 -->
<text v-if="loading">{{ progress }}%</text>
</view>
</template>
<script>
export default {
data() {
return {
file: null,
loading: false,
progress: 0
};
},
methods: {
handleFileChange(event) {
this.file = event.target.files[0];
},
async uploadImage() {
try {
if (!this.file) throw new Error('请选择要上传的文件');
const { name } = this.file;
// 开始上传前初始化状态
this.loading = true;
this.progress = 0;
await this.$ossClient.multipartUpload(name, this.file, {
progress(p) {
console.log(`Progress: ${p * 100}%`);
this.progress = Math.floor(p * 100);
}.bind(this),
});
// 成功后的操作...
alleet('上传成功!');
} catch (error) {
console.error(error.message || error);
alleet('上传失败,请重试...');
} finally {
this.loading = false;
}
}
}
};
</script>
```
此段代码实现了基本的功能需求——即选取本地图片并利用之前定义好的 `$ossClient` 进行分片上传。注意这里采用了 multipartUpload 方法以适应较大尺寸的照片传输,并且提供了实时更新上传进度的支持。
阅读全文
相关推荐

















