base64格式图片上传至阿里云OSS

       博主最近在开发一个项目,要用到base64图片上传至阿里云OSS,所以博主将这个过程分享给大家。

       我们首先先把base64图片保存在本地,然后再上传至阿里云OSS,代码如下:

//$imgBase64 图片base64格式
function imageDoAliyunOss($imgBase64)
{
   #引用阿里云上传文件
   require 'AliYunUpload.php';
   #转化base64编码图片
   if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $imgBase64, $res)) {
      //获取图片类型
      $type = $res[2];
      //图片名字
      $fileName = md5(time()) . '.' . $type;
      // 临时文件
      $tmpfname = tempnam("/image/", "FOO");
      //保存图片
      $handle = fopen($tmpfname, "w");
      //阿里云oss上传的文件目录
      $dst = 'zxnew/';
      if (fwrite($handle, base64_decode(str_replace($res[1], '', $imgBase64)))) 
      {
          #上传图片至阿里云OSS
          $aliyun = new AliYunUpload();
          $url = $aliyun->uploadImage($dst . $fileName, $tmpfname);
          #关闭缓存
          fclose($handle);
          #删除本地该图片
          unlink($tmpfname);
          #返回图片链接
          $returnUrl = '文件域名' . $dst . $fileName;
          return $returnUrl;
       }else {
          return '';
       }
    } else {
        return '';
    }

}

       下面我们再来封装阿里云OSS上传的方法,代码如下:

function uploadImage($dst, $getFile)
{
    #配置OSS基本配置
    $config = array(
        'KeyId' => 你的KeyId,
        'KeySecret' => 你的KeySecret,
        'Endpoint' => 你的Endpoint,
        'Bucket' => 你的Bucket,
    );
    $ossClient = new OssClient($config['KeyId'], $config['KeySecret'], 
    $config['Endpoint']);
    #执行阿里云上传
    $result = $ossClient->uploadFile($config['Bucket'], $dst, $getFile);
    #返回
    return $result;
}

       这样我们便成功完成了base64格式图片上传至阿里云OSS。

       更多文章请关注微信公众号

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3是一种流行的JavaScript框架,用于构建用户界面。它具有响应式数据绑定、组件化开发和虚拟DOM等特性,使得开发者可以更高效地构建交互式的Web应用程序。 要在Vue3中实现上图片到阿里云OSS,你可以按照以下步骤进行操作: 1. 安装依赖:首先,你需要安装阿里云OSS的JavaScript SDK。可以使用npm或yarn命令来安装,例如: ``` npm install ali-oss ``` 2. 配置OSS客户端:在Vue3的代码中,你需要创建一个OSS客户端实例,并配置相关参数,如AccessKeyId、AccessKeySecret、Endpoint等。这些参数可以在阿里云OSS控制台中获取。 3. 创建上组件:在Vue3中,你可以创建一个上组件,用于选择图片文件并触发上操作。可以使用`<input type="file">`元素来实现文件选择功能,并监听其`change`事件。 4. 上图片:在上组件中,你可以编写上图片的逻辑。当用户选择了图片文件后,你可以通过OSS客户端调用`put`方法来上图片文件到阿里云OSS。 下面是一个简单的示例代码,演示了如何在Vue3中上图片到阿里云OSS: ```javascript <template> <div> <input type="file" @change="handleFileChange"> </div> </template> <script> import OSS from 'ali-oss'; export default { methods: { handleFileChange(event) { const file = event.target.files[0]; const client = new OSS({ accessKeyId: 'your-access-key-id', accessKeySecret: 'your-access-key-secret', bucket: 'your-bucket-name', region: 'your-oss-region', // 其他配置参数... }); // 生成唯一的文件名 const fileName = Date.now() + '-' + file.name; // 调用OSS客户端的put方法上文件 client.put(fileName, file).then(response => { console.log('上成功', response); // 在这里可以处理上成功后的逻辑 }).catch(error => { console.error('上失败', error); // 在这里可以处理上失败后的逻辑 }); } } } </script> ``` 请注意,上述代码中的`your-access-key-id`、`your-access-key-secret`、`your-bucket-name`和`your-oss-region`需要替换为你自己的阿里云OSS相关信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛布朗斯基

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值