在nodejs，mysql中为上传的图像添加标题并做出反应

Question

大家好，我想为图像数组（多张图像）添加标题。我正在使用 mysql 存储数据，目前它存储这样的图像数据

我想为该图像数组添加标题，以便我可以仅使用我的标题调用这些图像 我的代码是

class Home extends Component {
    constructor( props ) {
        super( props );
        this.state = {
            selectedFile: null,
            selectedFiles: null,
            title: null
        }
        
    }

multipleFileChangedHandler = (event) => {
    this.setState({
        selectedFiles: event.target.files
    });
    console.log( event.target.files );
};


multipleFileUploadHandler = () => {
    const data = new FormData();
    let selectedFiles = this.state.selectedFiles;
    let title = this.state.title;
    data.append('title', title);

    if ( selectedFiles ) {
        for ( let i = 0; i < selectedFiles.length; i++ ) {
            data.append( 'galleryImage', selectedFiles[ i ], selectedFiles[ i ].name );
        }
        axios.post( '/api/profile/multiple-file-upload', data, {
            headers: {
                'accept': 'application/json',
                'Accept-Language': 'en-US,en;q=0.8',
                'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
            }
        })
            .then( ( response ) => {
                console.log( 'res', response );
                if ( 200 === response.status ) {
                    // If file size is larger than expected.
                    if( response.data.error ) {
                        if ( 'LIMIT_FILE_SIZE' === response.data.error.code ) {
                            this.ocShowAlert( 'Max size: 2MB', 'red' );
                        } else if ( 'LIMIT_UNEXPECTED_FILE' === response.data.error.code ){
                            this.ocShowAlert( 'Max 4 images allowed', 'red' );
                        } else {
                            // If not the given ile type
                            this.ocShowAlert( response.data.error, 'red' );
                        }
                    } else {
                        // Success
                        
                        this.ocShowAlert( 'File Uploaded', '#3089cf' );
                    }
                }
            }).catch( ( error ) => {
            // If another error
            this.ocShowAlert( error, 'red' );
        });
    } else {
        // if file not selected throw error
        this.ocShowAlert( 'Please upload file', 'red' );
    }
};

// ShowAlert Function
ocShowAlert = ( message, background = '#3089cf' ) => {
    let alertContainer = document.querySelector( '#oc-alert-container' ),
        alertEl = document.createElement( 'div' ),
        textNode = document.createTextNode( message );
    alertEl.setAttribute( 'class', 'oc-alert-pop-up' );
    $( alertEl ).css( 'background', background );
    alertEl.appendChild( textNode );
    alertContainer.appendChild( alertEl );
    setTimeout( function () {
        $( alertEl ).fadeOut( 'slow' );
        $( alertEl ).remove();
    }, 3000 );
};

render() {
    console.log( this.state );
    return(
        <div className="container" style={{paddingTop:'3%',paddingLeft:'10%',paddingRight:'10%'}}>
            {/* For Alert box*/}
            <div id="oc-alert-container"></div>
            
            {/* Multiple File Upload */}
            <div className="card" >
                <div className="card-header">
                    <h1>S3 Uploader</h1>
                    
                </div>
                <div className="card-body">
                     <label >Title</label>
                        <input type="text" onChange={ (e)=> this.state.title } placeholder="enter name" className="form-control"/>
                   
                    <p className="card-title">Please upload the folder</p>
                    <input type="file"  directory="" webkitdirectory="" accept="image/*" onChange={this.multipleFileChangedHandler}/>
                    <div className="mt-5">
                        <button className="btn btn-info" onClick={this.multipleFileUploadHandler}>Upload!</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

}

当用户输入一些名称并上传图片时，它将在上面输入的标题下添加数据库，请指导我 去实现它

Answer 1

我建议切换到 fetch 而不是 axios