阿里云oss上传图片

最新推荐文章于 2025-03-09 22:40:02 发布

嚣张.miner

最新推荐文章于 2025-03-09 22:40:02 发布

阅读量769

点赞数

分类专栏： react 文章标签：阿里云 javascript react.js oss上传图片 oss

本文链接：https://blog.youkuaiyun.com/zm_miner/article/details/124746234

版权

本文介绍了如何在React应用中实现阿里云OSS的图片上传，包括安装依赖、选择图片、调用getOSSClientCredit接口以及处理跨域问题。遇到跨域问题时，需要在阿里云OSS管理控制台进行相应设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖 npm install --save axios js-base64

点击修改按钮
在这里插入图片描述
弹框选择图片或者文件

在这里插入图片描述

代码
index.js

 <AliyunOSSUpload onGetFileUrl={onGetFileUrl} />

AliyunOSSUpload.js

import React from 'react';
import { Form, Upload, message, Button } from 'antd';
import { getOSSClientCredit, policyUpload } from '@/services/login';
import { Base64 } from 'js-base64';
import hmacSHA1 from 'crypto-js/hmac-sha1';
import CryptoBase64 from 'crypto-js/enc-base64';
export class AliyunOSSUpload extends React.Component {
  constructor() {
    super();
    this.state = {
      OSSData: {},
      setDataObj: {},
      loading: false,
    };
    this.dataObj =