uniapp小程序上传oss

uniapp上传小程序代码

import crypto from 'crypto-js';
import { Base64 } from 'js-base64/base64.js';
// 计算oss签名。
function computeSignature(accessKeySecret, canonicalString) {
  return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
}
const getPolicyBase64 = function () {
  let date = new Date();
  date.setHours(date.getHours() + '87600');
  let expiration = date.toISOString();
  const policyText = {
    "expiration": expiration, //设置该Policy的失效时间
    "conditions": [
      ["content-length-range", 0, 1024 * 1024 * 1024 * 5] // 设置上传文件的大小限制, 5G
    ]
  };
  const policyBase64 = Base64.encode(JSON.stringify(policyText));
  return policyBase64;
}

/**
 * 获取oss签名
 */
export const getOssAuthorization = (callback) => {
  request({
    url: `xxxxx`,
    method: 'get',
  }).then((res) => {
  	// 返回参数
	// {
    //   accessKeyId: "",
    //   accessKeySecret: "",
    //   bucket: '',
    //   bucketName: "", 桶名
    //   callback: null,
    //   dir: "",
    //   endpoint: "https://oss-cn-xxxx.aliyuncs.com",
    //   keyName: "",
    //   osBasicInfo: "",
    //   path: '',
    //   region: "",
    //   response: '',
    //   securityToken: ''
    // }
    callback && callback(res.data)
  })
};
/**
 * 
 * @param {string} filePath 文件的路径
 * @param {string} fileSize 文件的大小
 * @param {string} fileSuffix 文件后后缀
 * @param {string} fileName 文件夹名
 * @param {*} param
 * @returns 
 */
export const ossUploadFile = (filePath, fileSize, fileSuffix = '', fileName) => {
  return new Promise((resolve, reject) => {
    if (!filePath) {
      uni.showModal({ title: '文件错误', content: '请重试', showCancel: false });
      uni.hideLoading();
      return false;
    }
    getOssAuthorization(async(data) => {
      // 这里指定上传的文件名
      const aliyunFileKey = `${data.dir}${fileName}`;
      // 拼接上传的oss地址
      let str = 'https://'
      const aliyunServerURL = data.endpoint.replace(str, `${str}${data.bucketName}.`);
      // 密钥
      const accessKeyId = data.accessKeyId;
      // 超时的时间
      const policyBase64 = getPolicyBase64();
      // 临时证书
      const signature = computeSignature(data.accessKeySecret, policyBase64);
      uni.uploadFile({
        url: aliyunServerURL, // 上传的域名
        filePath: filePath, // 上传的文件
        name: "file",
        formData: {
          key: aliyunFileKey, // 文件名称
          policy: policyBase64, // 过期时间
          OSSAccessKeyId: accessKeyId, // 秘钥
          signature: signature, // 临时证书
          success_action_status: "200",
          "x-oss-security-token": data.securityToken
        },
        success: (res) => {
          console.log("成功回调", res)
          if (res.statusCode == 200) {
            let result = aliyunServerURL + "/" + aliyunFileKey
            console.log(result, '====文件地址');
            resolve(result)
          } else {
            reject(res)
          }
        },
        fail: (err) => {
          console.log(err, 'err==上传失败');
          err.wxaddinfo = aliyunServerURL
          reject(err)
        },
      })
    })
  });
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp 中实现将图片上传OSS(对象存储服务)的功能,你可以使用uni-app插件`uni.uploadFile`来实现。 首先,你需要将 OSS 的配置信息设置好,包括 `accessKeyId`、`accessKeySecret`、`bucket`、`region` 等信息。你可以将这些信息保存在配置文件中或者通过接口获取。 然后,在页面中添加一个按钮,用于触发选择图片和上传功能: ```html <template> <view> <button @click="chooseAndUpload">选择图片并上传</button> </view> </template> ``` 接下来,在页面的对应的 Vue 实例中,定义 `chooseAndUpload` 方法来触发选择图片和上传: ```javascript <script> export default { methods: { chooseAndUpload() { uni.chooseImage({ count: 1, success: (res) => { const tempFilePaths = res.tempFilePaths this.uploadImage(tempFilePaths[0]) }, }) }, uploadImage(filePath) { uni.uploadFile({ url: 'https://your-oss-endpoint', // 替换为你的 OSS 上传地址 filePath, name: 'file', formData: { key: 'your-oss-key', // 替换为你的 OSS 对象存储路径和文件名 policy: 'your-oss-policy', // 替换为你的 OSS 上传策略 OSSAccessKeyId: 'your-access-key-id', // 替换为你的 OSS AccessKeyId signature: 'your-oss-signature', // 替换为你的 OSS 签名 success_action_status: '200', // 上传成功的状态码 }, success: (res) => { console.log(res.data) // 上传成功后的响应数据 }, }) }, }, } </script> ``` 在 `chooseAndUpload` 方法中,我们使用 `uni.chooseImage` 方法来选择一张图片,然后将选中的图片路径传递给 `uploadImage` 方法进行上传。在 `uploadImage` 方法中,我们使用 `uni.uploadFile` 方法来实现图片上传功能。 注意替换 `https://your-oss-endpoint` 为你的 OSS 上传地址,并填充相应的 OSS 配置信息。 这样,当点击页面中的按钮后,就会触发选择图片并上传OSS 的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值