FineUploader 在第一次上传后不工作

Question

我已经在我的 React 应用程序中实现了 FineUploader 以将文件上传到我的 Azure Blob 存储并且它工作正常，除了一个问题。

成功上传文件后，如果我尝试上传另一个文件，FineUploader 不允许我select 一个新文件。单击 select 按钮会打开对话框，让我 select 一个文件，但是单击文件 select 它根本没有任何作用。我也没有看到任何错误。

知道是什么导致了这个问题吗？

这是我在我的应用程序中实现的 FineUploader：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import FineUploaderAzure from 'fine-uploader-wrappers/azure'

// Components
import Gallery from './gallery/index';

// Actions
import * as fileActions from '../../../../actions/file-actions';

// Instanciate FineUploader
const uploader = new FineUploaderAzure({
    options: {
        cors: {
            expected: true,
            sendCredentials: false
        },
        signature: {
            endpoint: 'https://api.myapp.com/files/get/sas'
        },
        request: {
            endpoint: 'https://myaccount.blob.core.windows.net/my-container'
        },
        validation: {
            itemLimit: 1
        }
    }
})

class FileUploader extends Component {

    constructor(props) {

        super(props);
        this.saveFileInfo = this.saveFileInfo.bind(this);
    }

    componentDidMount() {

        uploader.on('complete', (id, name, responseJSON, xhr) => {

            const originalName = uploader.methods.getName(id);
            const blobName = uploader.methods.getBlobName(id);
            const fileSize = uploader.methods.getSize(id);

            this.saveFileInfo(originalName, blobName, fileSize);
        })
    }

    saveFileInfo(fileName, blobName, fileSize) {

        // Gather necessary information
        const accountId = this.props.accountId;
        const id = this.props.id;
        const folderId = this.props.activeFolder.id;
        const files = [
            {
                fileName: blobName,
                displayName: fileName,
                fileSize: fileSize
            }
        ];

        // Call backend API to save file info in database
        this.props.actions.createFileRecords(accountId, bizObject, id, privilegeLevel, folderId, files);

        // Close modal
        const modalId = this.props.modalId;
        return this.props.handleClose(modalId, false);
    }

    render() {

        return (
            <div style={{ position: 'fixed', zIndex: 250000990 }}>
                <div className="modal-wrapper">
                    <div className="height-100 width-100" style={{ background: 'transparent', position: 'absolute', left: '0', top: '0' }}></div>
                    <div className="modal-window vertical-center">
                        <div className="modal-controls padding-right-20 padding-top-10" style={{ height: '50px', position: 'absolute', right: '0', top: '0', lineHeight: '40px', borderColor: 'transparent !important' }}>
                            <a className="modal-control mc-help"></a>
                            <a className="modal-control mc-close" onClick={e => this.props.handleClose(this.props.modalId, false)}></a>
                        </div>
                        <div className="width-100 height-100 border-radius border-black-w1-1" style={{ overflow: 'hidden', background: 'black !important', borderColor: 'black' }}>
                            <Gallery uploader={uploader} onComplete={this.handleFileUpload} />
                        </div>
                        <div style={{ position: 'absolute', bottom: '17px', left: '17px' }}>

                            {/* Privilege Level Selector */}
                            {this.renderPrivilegeLevels()}
                            <span className="app-btn app-btn-lg margin-left-20">Uploading into Folder: <strong>{this.props.activeFolder.name}</strong></span>

                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {

    return {
        modalId: ownProps.modalId,
        accountId: ownProps.accountId,
        id: ownProps.id,
        folders: ownProps.folders,
        activeFolder: ownProps.activeFolder,
        fileUpload: state.files.fileUpload,
        errors: state.files.errors,
        handleClose: ownProps.handleClose
    }
}

function mapDispatchToProps(dispatch, ownProps) {

    return {
        actions: bindActionCreators(fileActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(FileUploader)

Answer 1

如评论中所述，itemLimit: 1 选项将 Uploader 的上传总数限制为 1。

由于您要实现的实际上是避免一次上传多个文件，因此您可以使用选项 multiple: false 来阻止选择多个文件。

此外，为了避免用户添加更多文件而其他人仍在上传，您可以使用自定义验证来检查其他文件是否在 progress 中，例如：

   options: {
      ..., //other options
      callbacks: {
         onValidate: function (file) {
           if(getInProgress() > 0){
              return false;
           }        
           return true;        
      }
   }

请注意，onValidate 事件在默认的 Fine Uploader 验证器之前被调用

FineUploader 在第一次上传后不工作

FineUploader not working after first upload

fine-uploader

reactjs