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

Posted 2023-03-07

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

【英文标题】：add titles for the uploaded images in nodejs,mysql and react

【发布时间】：2021-12-05 11:29:14

【问题描述】：

大家好，我想为图像数组（多张图像）添加标题。我正在使用 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>
    );

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

【问题讨论】：

我建议切换到fetch 而不是axios

如果您想节省空间，请在上传文件数据时使用 gzip。 look at this answer gzip 在发送时，在服务器上，只需压缩数据。

@DeanVanGreunen 兄弟，它工作得很好。我认为在标题状态中犯了一些错误，请您检查一下

太棒了，祝你好运，只是标记我的答案，我想要一些积分;）

【参考方案1】：

我建议切换到 fetch 而不是 axios

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。