React Dropzone组件 - 如何动态更改postUrl?

问题描述 投票:0回答:1

我正在使用react dropzone组件https://github.com/felixrieseberg/React-Dropzone-Component来帮助将文件拖放到站点上。

我希望每个丢弃到dropzone的文件都被发布到不同的URL(AWS预签名URL)。本质上,我希望组件配置参数'postUrl'在此预签名URL更改时动态更改。

我目前有以下组件配置集

class Uploader extends React.Component {
  constructor(props){
   super(props);
   this.dropzone = 'null'
  }

  config = () => (
    {
      iconFiletypes: ['.jpg', '.png', '.gif'],
      showFiletypeIcon: true,
      postUrl: this.dropzone.options.url || 'no-url'
    }
  );

  eventHandlers = () => (
    {
      processing: function(file) {
      },
      init: dz => this.dropzone = dz,
    }
  );

  djsConfig = (requestID=this.props.requestId) => (
    {
      addRemoveLinks: false,
      acceptedFiles: "image/jpeg,image/png,image/gif",
      autoProcessQueue: true,
      init: function () {
        this.on("processing", async (file) => {
          const presigned_url = await uploadUrl(file, requestID, () => {})
          this.options.url = presigned_url;
        });
      }
    }
  );
}

加载页面/组件时出现以下错误:

Uncaught TypeError: Cannot read property 'url' of undefined

在处理文件时通过options.url更新Dropzone对象上的djsConfig没有机会按照我的意愿更新postUrl: this.dropzone.options.url

javascript reactjs
1个回答
0
投票

lex评论。更改您的init方法如下:

     init:function () {
         var _this=this;
         this.on("processing", async (file) => {
            const presigned_url = await uploadUrl(file, requestID, () => {})
           _this.options.url = presigned_url;
        });
     }
© www.soinside.com 2019 - 2024. All rights reserved.