react-fine-uploader使用动态文件名上传S3

时间:2017-09-12 22:19:40

标签: reactjs amazon-s3 fine-uploader

背景

我正在集成使用react-fine-uploader创建一个react应用程序直接上传到S3存储桶,我没有任何服务器端代码。我已经能够使用常规的uuid上传到我的桶,反应 - 精细上传器开箱即用。我现在想做的是动态创建文件名,以便我可以将文件写入s3"文件夹"。

问题

我知道我可以配置我的uploader.options.objectProperties.key,并传递一个函数,例如:

var uploader = new qq.s3.FineUploader({
    // ...
    objectProperties: {
        key: function(fileId) {
            return 'folder/within/bucket/' + this.getUuid(fileId);
        }
    }
});

(取自another answer

当您想要处理可从文件/上传器(例如uuid)获取的值以及其他静态信息时,这很好。我想要的是包括从其他地方传递给该组件的文件夹名称。这是我到目前为止的尝试:

//imports...
const uploader = new FineUploaderS3({
    options: {
        //other options...
        objectProperties: {
            key: function(fileId) {
                return folderName + '/' + this.getUuid(fileId);
            }
        }
    }
});

var folderName = null;

class FileUpload extends Component {
    constructor(props) {
        super(props);

        folderName = this.props.folderName;
    }

    render() {

        return (
            <div>
                <Gallery uploader={uploader} />
            </div>
        );
    }
};

export default FileUpload;

目前,这将其添加到s3中名为&#34; null&#34;的文件夹中,但我成功地将此组件传递给props中的folderName。

我需要做些什么来连接这些东西?

1 个答案:

答案 0 :(得分:0)

最初呈现fileUploadFileUpload道具的价值是多少?如上所述,这只会在fileUpload实例最初呈现组件时可以访问的范围中设置FineUploaderS3变量。如果稍后为fileUpload道具赋予了某个值,则可能需要componentWillReceiveProps()更新folderName(如果发生这种情况)(并且您只能拥有一个FileUpload道具,最后一个渲染会赢。)

另一种方法是创建依赖于组件的props或state作为其生命周期一部分的对象,并将它们存储在组件实例本身上,例如:

class FileUploadComponent extends Component {
  constructor(props) {
    super(props)
    // We can't use an arrow function for the key function below as we need to
    // access both this component's props and the FileUploader instance within it
    let component = this
    this.uploader = new qq.s3.FineUploader({
      // ...
      objectProperties: {
        key(fileId) {
          return `${component.props.folderName}/${this.getUuid(fileId)}`
        }
      }
    })
  }

  render() {
    return <div>
      <Gallery uploader={this.uploader}/>
    </div>
  }
}