Как передать значения из реакции на экспресс при обработке / загрузке файлов - PullRequest
Новая
       14

Как передать значения из реакции на экспресс при обработке / загрузке файлов

0 голосов
/ 05 июня 2019

TLDR: Как я могу передать 2 значения, чтобы выразить реакцию от реакции при загрузке файла?

У меня есть экспресс-маршрут, который должен принимать 2 значения img_url и image title. 

const img = new Image({
  img_url:result.url,
  image_title:req.body.image_title
});

В настоящее время я могу опубликовать img_url от реакции на экспресс, однако у меня возникают проблемы с отправкой image_title. Итак, чтобы заставить это работать сейчас, я делаю image_title:null

Я использую response-images-upload для передачи файла

И делая это в одиночку, передает в img_url экспресс-маршрут, 

handleUpload =  file =>  {

    const data = new FormData()
    const image = file[0]

    console.log(this.state.image_title)
    // debugger;
    data.append('ourImage',image)
    data.append('image_title', this.state.image_title)
    Axios.post('/images/upload', data).then((response) => {
        console.log(response);
        this.setState({
            image_url:response.data.img_url,
            // images: [...this.state.images, this.state.image_url ]
        })
    });
    console.log(this.state.image_url);
}

<ImageUploader
    withIcon={true}
    withPreview={true}
    onChange={this.handleUpload}       
    buttonText='Upload an image'
    imgExtension={['.jpg', '.gif', '.png', '.gif']}
    maxFileSize={5242880}
/>

Однако я хочу передать оба значения image title и сам img_url.Таким образом, в моей попытке я создаю форму, подобную этой, , но моя попытка не отправляет заголовок изображения на экспресс-маршрут.Моя попытка выдает ошибку

POST / images / upload 500 30,398 мс - 703 1 Ошибка типа: невозможно прочитать свойство 'путь' из неопределенного 1 в пути (/Users/eli/nodework/myexpressknex/routes/images.js:41:37)

Моя попытка 

<form onSubmit={this.handleUpload}>
    <TextField
        id="outlined-name2"
        label="Image Title"
        fullWidth
        name="image_title"
        value={this.state.image_title}
        onChange={this.handleChange}
        margin="normal"
    />
    <ImageUploader
        withIcon={true}
        withPreview={true}
        // onChange={this.handleUpload}
        buttonText='Upload an image'
        imgExtension={['.jpg', '.gif', '.png', '.gif']}
        maxFileSize={5242880}
    />
    <Button variant="outlined" color="primary" type="submit">
        Submit
    </Button> 
    <br></br>  
    <br></br> 
</form>

Итак, как я мог бы передать оба значения, чтобы выразить от реакции при загрузке файла?

экспресс-маршрут 

import express from 'express';
import passport from 'passport';
import multer from 'multer';
import Image from '../models/Image'
import cloudinary from 'cloudinary';
import multipart from 'connect-multiparty';
import var_dump from 'var_dump';
import dd from 'dump-die';

const multipartMiddleware = multipart();

const cloud = cloudinary.v2
const router = express.Router();

const storage = multer.memoryStorage();
const upload = multer({ storage }); 


cloudinary.config({
    cloud_name: process.env.cloudinaryName,
    api_key: process.env.cloudinaryKey,
    api_secret: process.env.cloudinarySecret,
})


router.get('/uploads', (req, res) => {
    Image.forge().fetchAll().then( (images) => {
        res.json(images.toJSON());
    })
})


router.post('/upload',  multipartMiddleware,  upload.single('ourImage'), (req, res) => {
     if(!req.files){
         return res.status(500).send("Please upload a file");
     }
     console.log(req.files.ourImage.path)
    cloud.uploader.upload(req.files.ourImage.path, {crop: "thumb", folder: '/uploads'} ,    (err, result) => {
        if(err){
            return res.status(500).send(err);
        }
        const img = new Image({
            img_url:result.url,
            image_title:null
        });
        // console.log(img);

        img.save().then( img => {
            return res.status(200).json(img);
        });

    });
});

export default router;

реагировать сторона 

import React, { Component } from "react";
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import ImageUploader from 'react-images-upload';
import Axios from '../Axios';
import Image from './Image';
class Dashboard extends Component{
    constructor(props){
        super();
        this.state = {
            image_url: 'http://www.conservewildlifenj.org/images/artmax_1001.jpg', 
            images: [], 
            image_title:''
        }
    }
    handleUpload =  file =>  {
        const data = new FormData()
        const image = file[0]
        console.log(this.state.image_title)
        // debugger;
        data.append('ourImage',image)
        data.append('image_title', this.state.image_title)
        Axios.post('/images/upload', data).then((response) => {
            console.log(response);
            this.setState({
                image_url:response.data.img_url,
                // images: [...this.state.images, this.state.image_url ]
            })
        });
        console.log(this.state.image_url);
    }
    handleChange = (e) => {
        // e.preventDefault();
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    // fileOnchange = (file) => {
    //     this.setState({
    //         [file[0].target.name]: file[0].target.value
    //     })
    // }
    componentWillMount(){
        Axios.get('/images/uploads').then( (response) => {
            let img;
            Object.keys(response.data).forEach( (key) => {
                img = response.data[key].img_url
                console.log(key, img);
                this.setState({
                    images: [...this.state.images, img]
                })
            });
        })
    }
    componentDidUpdate(nextProps, prevState) {
        if (this.state.image_url !== prevState.image_url) {
          this.setState({
            images: [ this.state.image_url, ...this.state.images]
          });
        }
      }
    render(){
        return(
            <div>
            <Grid container justify="center" spacing={16}>
                <Grid item sm={8} md={6} style={{ margin: '40px 0px', padding: '0px 30px'}}>
                    <Typography align="center" variant="h6">
                        Welcome to the Dashboard
                    </Typography>
                    <form onSubmit={this.handleUpload}>
                        <TextField
                            id="outlined-name2"
                            label="Image Title"
                            fullWidth
                            name="image_title"
                            value={this.state.image_title}
                            onChange={this.handleChange}
                            margin="normal"
                        />
                        <ImageUploader
                            withIcon={true}
                            withPreview={true}
                            // onChange={this.handleUpload}
                            buttonText='Upload an image'
                            imgExtension={['.jpg', '.gif', '.png', '.gif']}
                            maxFileSize={5242880}
                        />
                        <Button variant="outlined" color="primary" type="submit">
                            Submit
                        </Button> 
                        <br></br>  
                        <br></br> 
                    </form>
                    {this.state.images.length > 0 ? (
                        this.state.images.map( (img, i) => (     
                            <Grid item md={8} key={i}>
                                {/* <Image image_url={this.state.image_url}/> */}
                                    <Image image_url={img} />                   
                            </Grid>
                        ))
                    ) : (
                        <div>
                            <Grid item md={8}>
                                <Typography>No Images yet</Typography>
                            </Grid>
                        </div>
                    )}
                </Grid>
                {/* Images  */}
              </Grid>
            </div>
        )
    }
}
export default Dashboard;
...