Question

背景

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

问题

我知道我可以配置我的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。

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

Answer 1

最初呈现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>
  }
}

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

背景

问题

1 个答案: