简介

本文记录使用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}`;
        });
      });
    },
  });
};

代码解析：

1. selectImage可以作为点击事件触发的调用方法；
2. 使用 uni.chooseImage 触发选择本地图片的功能（打开资源管理器）；
3. count，sizeType 选择图片的限制参数，只能选择一张图片，是否允许拍照，更多配置参数请自行查阅uniapp官网：【chooseimage】，请基于自身实际情况修改。
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。(不得不说的是，阿里云有些文档写的是真的看不懂，乱得很)。
2. fileName 是依据业务规则生成的新的文件名。
3. tempFilePath 是前面提到的uniapp生成的文件临时路径，这个不能改变！
4. 使用 uni.uploadFile 开始真正的上传文件
5. 其中 url 是阿里云oss的地址；
6. filePath 是uniapp的文件临时路径；
7. name 是文件数据的属性名字，阿里云是固定的file；
8. formData 是其他的字段，这里都是阿里云文档中标示的必选/可选字段，具体字段含义请参考阿里云文档【PostObject】。
9. success 是上传成功后的回调函数。

下面是 getSignature 接口返回的一些参数，不保证完全一致，具体情况请根据自身业务调整

总结

使用Uniapp实现图片上传还是比较简单的，而且在电脑端模拟器中也可以进行相关调试，其他类型文件上传也可以参考本文内容，逻辑大致相同，总结要点步骤如下：

1. 使用 uni.chooseImage 来实现选择图片的功能，当然也可以使用其他方法，如 uni.chooseMedia 等；
2. 使用 uni.uploadFile 快速实现上传图片接口的调用；
3. 遵从上传图片接口的要求，进行相关参数的组装，如使用阿里云oss，就需要查阅阿里云的文档。本文使用的是：后端签名 前端上传 模式，即 服务端签名直传 模式，其他模式请自行查阅阿里云文档；
4. 如果添加了 callback 参数，则回调接口要保证正确，如果阿里云回调发生错误，可能会判定为图片上传失败，但其实图片上传成功了，只是回调失败，务必注意！

赞助请求V3

建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！

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