Uniapp实现图片上传到阿里云oss
## 简介 本文记录使用Uniapp开发小程序时,如何实现一个文件(图片)上传的功能,并且将图片上传
渲染中...
## 简介
本文记录使用Uniapp开发小程序时,如何实现一个文件(图片)上传的功能,并且将图片上传至阿里云OSS。
> 基于Vue3
## 选择图片
```ts
const selectImage = () => {
uni.chooseImage({
count: 1,
sizeType: ["compressed"],
success: (file) => {
console.log(file);
getSignature("avatar").then((sign) => {
// console.log(sign);
const newName = getNewFilename(file.tempFilePaths[0]);
// console.log(newName);
uploadImage(sign, newName, file.tempFilePaths[0]).then((res) => {
// console.log(res);
imageStr.value = `${sign.host}/${sign.dir}/${newName}`;
info.value.avatarUrl = `${sign.host}/${sign.dir}/${newName}`;
});
});
},
});
};
```
<!-- more -->
### 代码解析:
1. `selectImage`可以作为点击事件触发的调用方法;
2. 使用 `uni.chooseImage` 触发选择本地图片的功能(打开资源管理器);
3. `count`,`sizeType` 选择图片的限制参数,只能选择一张图片,是否允许拍照,更多配置参数请自行查阅uniapp官网:【[chooseimage](https://zh.uniapp.dcloud.io/api/media/image.html#chooseimage-harmonyos-%E5%85%BC%E5%AE%B9%E6%80%A7)】,*请基于自身实际情况修改*。
4. `success` 为选择图片后的回调函数;
5. 因为这里是前端上传图片到阿里云OSS,所以需要获取阿里云OSS的临时授权密钥等信息,否则后续无法正常调用阿里云的存储服务,所以这里先执行 `getSignature` ,调用自己的后端接口获取授权信息,*请基于自身实际情况修改*。
6. `getSignature` 成功后,这里对选择后的文件名进行重新生成,所以使用了 `getNewFilename`,*请基于自身实际情况修改*。
7. 因为这里限制每次只能选择一张图片,所以 `file.tempFilePaths[0]` 直接选择的第一张图片的名字,`file.tempFilePaths[0]` 获取到的是uniapp自动生成的临时文件名,一般格式是`http://xxxx.jpg`,*请基于自身实际情况修改*。
8. `uploadImage` 是二次封装的上传图片接口,请看下方【**上传图片**】详细代码
9. 上传成功后,直接使用 `${sign.host}/${sign.dir}/${newName}` 拼装成功后的图片url链接,*请基于自身实际情况修改*。
## 上传图片
```ts
export const uploadImage = (
param: OssSign,
fileName: string,
tempFilePath: string
): Promise<OssResponse> => {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: param.host || "", //仅为示例,非真实的接口地址
filePath: tempFilePath,
name: "file",
formData: {
// callback: param.callback,
OSSAccessKeyId: param.accessid,
policy: param.policy,
Signature: param.signature,
success_action_status: '200',
key: `${param.dir}/${fileName}`, // 自定义文件名
},
success: (res) => {
console.log(JSON.stringify(res));
const { statusCode, data } = res;
if (statusCode === 200) {
// 确保 data 是期望的类型
const r = data as OssResponse;
resolve(r);
}
},
fail: (err) => {
reject(err)
}
});
});
};
```
### 代码详解
1. `param` 是前面从 `getSignature` 获取到的阿里云授权参数,具体参数有哪些 请看最后的表格,更多信息可前往阿里云官方文档查阅:[如何进行服务端签名直传OSS](https://help.aliyun.com/zh/oss/use-cases/obtain-signature-information-from-the-server-and-upload-data-to-oss?spm=a2c4g.11186623.0.0.4d6b4cf5V7eVlt#9237c8b8c7wnu)。(`不得不说的是,阿里云有些文档写的是真的看不懂,乱得很`)。
2. `fileName` 是依据业务规则生成的新的文件名。
3. `tempFilePath` 是前面提到的uniapp生成的文件临时路径,这个不能改变!
4. 使用 `uni.uploadFile` 开始真正的上传文件
5. 其中 `url` 是阿里云oss的地址;
6. `filePath` 是uniapp的文件临时路径;
7. `name` 是文件数据的属性名字,阿里云是固定的`file`;
8. `formData` 是其他的字段,这里都是阿里云文档中标示的必选/可选字段,具体字段含义请参考阿里云文档【[PostObject](https://help.aliyun.com/zh/oss/developer-reference/postobject)】。
9. `success` 是上传成功后的回调函数。
下面是 `getSignature` 接口返回的一些参数,不保证完全一致,具体情况请根据自身业务调整
|字段名|含义|备注|
|----|----|----|
|expire|由服务器端指定的Policy过期时间|一般可以忽略|
|policy|用户表单上传的策略(Policy)|上传必填参数|
|signature|对Policy签名后的字符串|上传必填参数|
|accessid|临时访问密钥AccessKey ID|上传必填参数|
|host|Bucket域名|如果没有自定义域名,则一般是阿里云oss服务的域名,上传图片时调用的地址就是该值,同时也是图片URL的域名|
|callback|回调|如果上传图片成功后需要阿里云回调自身服务器接口,可在上传图片是传入该参数|
|dir|限制上传的文件前缀|大概是需要拼接到文件名上的,即上面代码 `formData` 中的 `key`|
## 总结
使用Uniapp实现图片上传还是比较简单的,而且在电脑端模拟器中也可以进行相关调试,其他类型文件上传也可以参考本文内容,逻辑大致相同,总结要点步骤如下:
1. 使用 `uni.chooseImage` 来实现选择图片的功能,当然也可以使用其他方法,如 `uni.chooseMedia` 等;
2. 使用 `uni.uploadFile` 快速实现上传图片接口的调用;
3. 遵从上传图片接口的要求,进行相关参数的组装,如使用阿里云oss,就需要查阅阿里云的文档。本文使用的是:后端签名 前端上传 模式,即 **服务端签名直传** 模式,其他模式请自行查阅阿里云文档;
4. 如果添加了 `callback` 参数,则回调接口要保证正确,如果阿里云回调发生错误,可能会判定为图片上传失败,但其实图片上传成功了,只是回调失败,务必注意!
## 赞助请求V3
**建站因为热爱,生活需要Money,请屏幕前的大佬动动您发财的小手,点击一次以示鼓励,祝您生活愉快!**
<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>
> PS:就目前的访问量,即便每个访客都点一次广告,收入也不足以支付运营成本。`如果看不到广告,可能是网络原因或被拦截了,那就算了吧。再次祝您生活愉快~~`END
评论
登录后查看和发表评论
前往登录