文件上传到 OSS 的小程序工具函数

此工具函数 uploadOss 用于在微信小程序中将临时文件上传到阿里云 OSS（对象存储服务）。它提供了灵活的参数设置，允许自定义文件路径、文件名前缀和文件目录。

目录

• 环境依赖
• 函数说明
• 参数
• 使用示例
• 注意事项
• 参考资料
• 源码

---

环境依赖

1. 需要使用 Taro 框架。（如果不是Taro，可以把前缀Taro.替换成uni.，或者是wx.调用）
2. 阿里云 OSS 的相关配置和权限授权。
3. getOssAuth 服务接口，用于获取 OSS 的授权信息。

函数说明

uploadOss 函数用于在小程序端将文件上传至指定的阿里云 OSS 存储桶。上传过程中调用 getOssAuth 函数以获取访问密钥、策略和签名。生成唯一的文件名后，使用 Taro.uploadFile 方法完成文件上传。

参数

参数名	类型	是否必选	默认值	说明
tmpUrl	string	是	无	微信临时文件地址
prefix	string	否	'clone'	OSS 文件名前缀，用于标识文件来源，默认为 clone
fileName	string	否	'video'	OSS 文件名
filePath	string	否	'dh_awesome/dh_models/videos'	OSS 文件目录，默认为视频目录

返回值

返回一个 Promise 对象，若上传成功则返回上传后的文件 URL，否则返回错误信息。

使用示例

以下是如何使用 uploadOss 函数将文件上传至 OSS 的示例：

import { uploadOss } from '@/utils/uploadOss/index';

const tmpFileUrl = '微信提供的临时文件路径';
uploadOss({
  tmpUrl: tmpFileUrl,
  prefix: 'custom_prefix', // 自定义前缀
  fileName: 'example_video', // 自定义文件名
  filePath: 'my_custom_path/videos', // 自定义文件路径
})
  .then((url) => {
    console.log('上传成功，文件地址：', url);
  })
  .catch((error) => {
    console.error('上传失败：', error);
  });

注意事项

1. OSS 授权信息：调用 getOssAuth 获取授权信息时，确保接口返回包含 accessKeyId、policy、signature、token 等字段，否则上传会失败。
2. 文件名唯一性：函数中使用时间戳确保文件名唯一性，避免文件覆盖问题。
3. 网络请求：上传文件是异步请求，建议在页面中展示上传进度或状态提示（如 Taro.showLoading 和 Taro.hideLoading）。
4. 文件格式：该工具函数会自动获取文件的扩展名（后缀），请确保 tmpUrl 是有效的微信临时文件路径。
5. 错误处理：若上传失败，可以查看返回的 statusCode 或错误信息，以便进行进一步调试。

参考资料

• 阿里云官方文档：使用微信小程序上传文件到 OSS

源码

import { getOssAuth } from '@/service/oss';
import Taro from '@tarojs/taro';

interface UploadOssParams {
  tmpUrl: string; // 微信临时文件地址
  prefix?: string; // oss文件名前缀，默认为'clone'
  fileName?: string; // oss文件名，默认为'video'
  filePath?: string; // oss文件目录，默认为 'dh_awesome/dh_models/videos'
}
const OSS_BASE_URL ='你的远程oss仓库地址';

/**
 * 上传文件到OSS
 * // 桶名 digital-dh-prod-wlcb
 * @param {UploadOssParams} params - 上传文件所需的参数
 * @param {string} params.tmpUrl - 微信临时文件地址
 * @param {string} [params.prefix='clone'] - oss文件名前缀 clone克隆相关的文件
 * @param {string} [params.fileName='video'] - oss文件名
 * @param {string} [params.filePath='dh_awesome/dh_models/videos'] - oss文件目录-默认上传放在视频目录下
 * @returns {Promise<string>} 上传成功后返回文件的OSS地址
 */

export function uploadOss({
  tmpUrl,
  prefix = 'clone',
  fileName = 'video',
  filePath = 'dh_awesome/dh_models/videos',
}: UploadOssParams): Promise<string> {
  return new Promise(async (resolve, reject) => {
    if (!tmpUrl) {
      throw new Error('tmpUrl 参数是必填项，不能为空');
    }
    try {
      const res = await getOssAuth(); // 调用后端的接口，获取签名信息
      // 加入时间戳-以免文件名重复
      const unixTime = String(Date.parse(new Date().toString()) / 1000);
      //获取最后一个.的位置
      const fileIndex = tmpUrl.lastIndexOf('.');
      //获取文件后缀
      const fileExt = tmpUrl.substring(fileIndex + 1);
      const filePathName = `${filePath}/${prefix}_${fileName}_${unixTime}.${fileExt}`;

      const formData = {
        key: filePathName, //存放资源的位置及文件名
        OSSAccessKeyId: res.accessKeyId,
        policy: res.policy,
        signature: res.signature,
        'x-oss-security-token': res.token, // 使用STS签名时必传。
        success_action_status: 200, // 自定义成功返回的http状态码，默认为204
      };
      //   console.log(formData, 'formData');
      Taro.showLoading({ title: '上传中' });
      Taro.uploadFile({
        url: OSS_BASE_URL,
        filePath: tmpUrl,
        name: 'file', // 值必须为 file
        formData,
        success(result) {
          if (result.statusCode == 200) {
            // 最终的文件地址
            const url = `${OSS_BASE_URL}/${filePathName}`;
            resolve(url);
          } else {
            reject(result);
          }
        },
        fail: function (fail) {
          console.error(fail);
          reject(fail);
        },
        complete: function () {
          // 不管成功或失败都关闭showLoading
          Taro.hideLoading();
        },
      });
    } catch (error) {
      console.error(error);
      reject(error);
    }
  });
}

还有其他问题可以找我