oss上传文件使用url，oss上传文件，antdesign upload组件 url上传 oss

1. 搬运链接：https://juejin.cn/post/6844903929164070926

Ant Design 使用Upload组件默认方式上传图片到阿里云OSS

背景

近来做了一个管理后台，采用的AntDesignPro脚手架，阿里版的React全家桶，包含Ant Design组件库，Dva状态管理，权限模块，国际化，主题定制等等称成熟的解决方案，当然这不是今天要将的重点。

今天要谈论的是使用Upload默认方式上传到OSS，为啥要用默认的方式上传呢？

No reason ! Why not !!

！！！！ 现在官方已经更新相关示例和api，建议参考官方示例：

ant.design/components/…

正文

直接上代码，试试代码自解释：

import CryptoJS from 'crypto-js';
import Base64 from 'base-64';

const uploadButton = (
   <div>
     <Icon type={
   payImgLoading ? 'loading' : 'plus'} />
     <div className="ant-upload-text">Upload</div>
   </div>
 );

<Upload
  action="http://xxxx.oss-cn-shanghai.aliyuncs.com"
  accept="image/*"
  listType="picture-card"
  className="avatar-uploader"
  showUploadList={
   false}
  beforeUpload={
   this.beforeUpload}
  onChange={
   this.handleChange}
  data={
   {
   
    key: todayKey + "/${filename}",
    policy: policyBase64,
    OSSAccessKeyId: accessKeyId,
    success_action_status: 200,
    signature,
  }}
>
  {
   
     payImgUrl ? 
     <img 
        src={
   imgUrl} 
        alt="avatar" 
        style={
   {
    width: '100%' }} 
     /> : 
     uploadButton

  }
</Upload>

以上代码重点关注Upload组件的action属性和data属性，一个是图片上传接口地址，当然可以直接是 OSS 对象存储地址； 而核心在data属性上：

• key: 文件路径采用：日期文件夹 + 文件名

需要注意的是后面的 “/${filename}”，这里不是反引号，整体是字符串，filename是形参，不能填入真实文件名；

• policy: policyBase64

<code class="copyable" lang