我正在集成使用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。
我需要做些什么来连接这些东西?
答案 0 :(得分:0)
最初呈现fileUpload
时FileUpload
道具的价值是多少?如上所述,这只会在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>
}
}