代码之家 › 专栏 › 技术社区 › Dave Miller

react fine uploader S3 upload使用动态文件名

fine-uploader amazon-s3 reactjs

Dave Miller · 技术社区 · 7 年前

出身背景

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中一个名为“null”的文件夹中,但我正在props中成功地将folderName传递给这个组件。

1 回复 | 直到 7 年前

Jonny Buchanan 7 年前

它的价值是什么 fileUpload FileUpload 最初是否渲染?如前所述,这只会设置 文件上传 FineUploaderS3 文件上传 componentWillReceiveProps() 要更新 folderName 文件上传 组件,因为最后一个渲染的组件将获胜)。

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>
  }
}

推荐文章

Anna Berezko · AWS匹配不支持的TLD域名和S3 bucket静态网站

1 年前

renzCNFT · 与s3相比,workdocs有什么优势

2 年前

Hasham · 如何将多个本地文件上载到s3中的一个文件

2 年前

sebas flores · S3 URL-使用python下载

2 年前

Jawwad Hussain · 带s3 amazaon的玛雅edms

2 年前

sklal · 在Python中从S3存储桶读取xml文件——只存储最后一个文件的内容

2 年前

Tobitor · S3:无效的bucket name-bucket name必须与正则表达式匹配

2 年前

geo909 · AWS Athena:具有非标准文件结构的S3存储桶分区表

3 年前

DEB · 上传焦油。gz文件到S3 Bucket,使用Bot3和Python

3 年前

omid · 下一个js-导出站点的目录结构

3 年前