Uniapp实现图片上传到阿里云oss

## 简介

本文记录使用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：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`