vue 使用oss sts方式进行上传下载操作

1 篇文章 0 订阅

1.api.ocrUi:调用后端接口返回oss相关信息(AccessKeyId、AccessKeySecret、SecurityToken、BucketName、Expiration)。

2.Expiration超时时间,通过后端返回的过期日期转换成时间戳与当前时间戳进行判断,在还有1分钟超时的时候重新调用接口更新相关oss信息。

let OSS = require('ali-oss');
const path = require("path")
import api from '@/api';

let ossConfig = null;
let prescription = new Date().getTime();

const OssFunc = async () => {
  let now = new Date().getTime();
  console.log('prescription - now',prescription - now)
  if (prescription - now < 60000) {
    let params = {
      requestType: 'getStsToken',
    }
    console.log('oss调用')
    let res = await api.ocrUi(params);
    ossConfig = res.body;
    prescription = new Date(res.body.Expiration).getTime()
  }
  
  // 设置客户端请求访问凭证的地址。
  const client = new OSS({
    // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
    region: 'oss-cn-shanghai',
    accessKeyId: ossConfig.AccessKeyId,
    accessKeySecret: ossConfig.AccessKeySecret,
    stsToken: ossConfig.SecurityToken,
    // endpoint: token.Endpoint,
    bucket: ossConfig.BucketName,
  });
  return client;
};



async function put(fileName, file) {
  try {
    // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
    // 如果本地文件的完整路径中未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件。
    //const result = await oss.put(fileName);
    //let result = await oss.put('object-name', new Buffer('hello world'))
    let oss = await OssFunc();

    const result = await oss.multipartUpload(fileName, file);
    return result;
  } catch (e) {
    console.log(e);
  }
}

async function putFile(fileName, file) {
  try {
    // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
    // 如果本地文件的完整路径中未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件。
    //const result = await oss.put(fileName);
    let oss = await OssFunc();

    let result = await oss.put(fileName, file)
    return result;
  } catch (e) {
    console.log(e);
  }
}

async function getFileBuffer(name) {
  try {
    let oss = await OssFunc();

    return oss.get(name);
  } catch (e) {
    console.log(e);
  }
}

async function get() {
  try {
    // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
    // 如果指定的本地文件存在会覆盖,不存在则新建。
    // 如果未指定本地路径,则下载后的文件默认保存到示例程序所属项目对应本地路径中。
    let oss = await OssFunc();

    const result = await oss.get(fileName, file);
    console.log(result);
    return 'https://test-jzstore.oss-cn-shanghai.aliyuncs.com/' + result.name;
  } catch (e) {
    console.log(e);
  }
}

async function getConfig(url) {
  try {
    let oss = await OssFunc();

    let result = await oss.get(url)
    let str = result.content.toString()
    return str
  } catch (e) {
    return false
  }
}

async function getUrl(name) {
  try {
    // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
    // 如果指定的本地文件存在会覆盖,不存在则新建。
    // 如果未指定本地路径,则下载后的文件默认保存到示例程序所属项目对应本地路径中。
    let oss = await OssFunc();

    const result = await oss.signatureUrl(name);
    return result;
  } catch (e) {
    console.log(e);
  }
}


export {
  getFileBuffer,
  put,
  get,
  getUrl,
  putFile,
  getConfig
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue Uniapp项目中的OSS图片上,你可以使用以下代码实现: ```javascript // 引入OSS方法 import { UploadOss } from 'path/to/OSSUtil.js'; // 在需要上图片的地方调用上方法 UploadOss(FileBox, OssBox) .then(url => { if (url) { // 上成功,可以在这里对返回的图片URL进行处理 console.log('上成功,图片URL为:', url); } else { // 上失败 console.error('上失败'); } }) .catch(error => { console.error('上出错:', error); }); ``` 在上述代码中,`UploadOss`是一个异步方法,通过入`FileBox`和`OssBox`参数来实现OSS图片上。具体的上过程如下: 1. 调用`uni.showLoading`方法显示上中的加载提示。 2. 使用`uni.uploadFile`方法进行文件上,其中`url`参数为OSS服务器地址,`filePath`参数为需要上的文件路径,`fileType`参数为文件类型,这里设置为'image',`name`参数为上文件的字段名,这里设置为'file'。 3. 在`formData`参数中,设置了OSS所需的各种参数,如`key`、`policy`、`OSSAccessKeyId`、`success_action_status`和`signature`。 4. 上成功后,使用`uni.hideLoading`方法隐藏加载提示,并将上成功后的图片URL返回。 5. 上失败时,也使用`uni.hideLoading`方法隐藏加载提示,并返回`false`表示上失败。 请注意,上述代码中的`path/to/OSSUtil.js`是一个示例路径,你需要根据实际需求替换为你自己的OSS工具文件路径。另外,你还需要根据实际情况修改OSS服务器地址和其他参数。 这样,你就可以在Vue Uniapp项目中实现OSS图片上了。<span class="em">1</span> #### 引用[.reference_title] - *1* [uniapp OSS](https://blog.csdn.net/qq_43784821/article/details/124478961)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_blog_pc_vip","utm_medium":""}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值