阿里云OSS上传

最新推荐文章于 2024-07-21 14:35:40 发布

你长得可真好看�

最新推荐文章于 2024-07-21 14:35:40 发布

阅读量497

点赞数

文章标签： javascript upload react

本文链接：https://blog.youkuaiyun.com/qq_50825973/article/details/111875005

版权

本文介绍了如何在阿里云OSS上实现手动上传文件，包括antd组件的修改以实现手动上传，以及umi+antd+react+dva环境下的具体操作步骤。通过后端提供的参数配置，实现文件上传并传递key值给后端。

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

阿里云OSS上传

一、点击上传按钮直接上传

这种方式相当于自动上传，可以参考antd官网的给的例子

首先，后端会提供一个接口，会返回一些上传到OSS需要的类似配置参数（下面的是我们后端同学给返回的参数）：
(1) accessId，对应OSSAccessKeyd
(2) policy
(3) signature
(4) host，OSS的上传地址
下面是请求上传OSS的配置数据代码：

getExtraData = file => {
   
    this.setState({
   
      uid: file.uid
    })
    return {
   
      key: file.uid,
      OSSAccessKeyId: this.state.getUploadAccessData.accessid,
      policy: this.state.getUploadAccessData.policy,
      Signature: this.state.getUploadAccessData.signature,
    };
  }

根据返回的地址（host）请求上传并携带上述参数；

const uploadProps = {
   
      name: 'file',
      action: getUploadAccessData.host,
      data: this.getExtraData,
      showUploadList: false,
      onChange(info) {
   
        if (upState === 0) {
   
          message.loading('正在导入..', 0);
        }
        upState = 1;
        if (info.file.status === 'done') {
   
          message.destroy();
          message.success('导入成功(重复字段已被自动过滤)');
          upState = 0;
          _this.fieldImport() //第三步中的请求后端接口
        } else if (info.file.status === 'error') {
   
          message.destroy();
          message.

最低0.47元/天解锁文章