Question

我尝试从React上传照片，并将其保存在后端的公共文件夹中，然后在MySql数据库中显示文件名

通过Postman尝试后，照片已成功上传并显示并生成了这样的json

{"image":"/img/14d714a9ed97fb92db657b9518e89a1e.png",
"id_produk":23,
"id_user":19,
"Nama_toko":"Nihongo Mantappu",
"Nama_Produk":"Butter",
"Deskripsi":"Mentega Blueband 50g",
"Price":5000,
"Jumlah_stock":7},

但是当我在React中尝试时，它只能产生

{"image":"/img/",
"id_produk":29,
"id_user":19,
"Nama_toko":"Nihongo Mantappu",
"Nama_Produk":"Beras Cinajur",
"Deskripsi":"Beras Cianjur 1kg",
"Price":500000,"Jumlah_stock":20}

这样，当我检查图像上的数据库时，它就会变空

此处为上传图片的代码

import React from 'react'
import jwt_decode from 'jwt-decode';
import 'bootstrap/dist/css/bootstrap.min.css';
import NavbarPenjual from '../../Component/NavbarPenjual';
import {addproduk} from '../../View/UserFunctions';
import { Form,Col, Button } from 'react-bootstrap';


class TambahProduk extends React.Component{
    
    constructor(){
        super()
        this.state={
            id_user:'',
            Nama_toko:'',
            Nama_produk: '',
            Harga:'',
            image: '',
            Deskripsi: '',
            Jumlah_produk: '',
            error:{}
        }
        this.onChange=this.onChange.bind(this)
        this.onSubmit=this.onSubmit.bind(this)
    }
    onChange(e){
        this.setState({[e.target.name]:e.target.value})
    }
    componentDidMount(){
        const token = localStorage.getItem('usertoken')
        const decoded= token ? jwt_decode(token) : null;
        this.setState({
            id_user:decoded.id_user,
            Nama_toko:decoded.Nama_toko
        })
    }
    onSubmit(e){
        e.preventDefault()
        const newProduk={
            id_user:this.state.id_user,
            Nama_toko:this.state.Nama_toko,
            Nama_Produk: this.state.Nama_Produk,
            Price:this.state.Price,
            image: this.state.image,
            Deskripsi: this.state.Deskripsi, 
            Jumlah_stock: this.state.Jumlah_stock,
        }
        console.log(newProduk)
        addproduk(newProduk).then(res =>{
            //localStorage.setItem('usertoken',res.data.token);
            this.props.history.push(`/DashboardPenjual`)
                }).catch(err=>{
                    console.log(err)
                    alert("gagal")
            })
    }
    render(){
        return(
            <div>
                <NavbarPenjual/>
                
                <Form className="container"style={{marginTop:28}}  noValidate onSubmit={this.onSubmit}> 
                    <h2>Tambah Produk</h2>
                    <Form.Row controlId="exampleForm.ControlInput1">
                        <Form.Label column lg={2}>
                            Nama Produk  
                        </Form.Label>
                        <br/>
                        <Col>
                            <Form.Control 
                            type="text" 
                            placeholder="Masukan Nama Produk"
                            name="Nama_Produk"
                            value={this.state.Nama_Produk}
                            onChange={this.onChange}
                            />
                        </Col>
                    </Form.Row>
                    <br/> 
                    <Form.Row controlId="exampleForm.ControlInput1">
                        <Form.Label column lg={2}>
                            Harga Produk 
                        </Form.Label>
                        <br/>
                        <Col>
                            <Form.Control type="text" 
                            placeholder="Masukan Harga Produk"
                            name="Price"
                            value={this.state.Price}
                            onChange={this.onChange}
                            />
                        </Col>
                    </Form.Row>
                    <br/>
                    <Form.Row controlId="exampleForm.ControlInput1">
                        <Form.Label column lg={2}>
                            Jumlah Produk
                        </Form.Label>
                        <br/>
                        <Col>
                            <Form.Control 
                            type="text" 
                            placeholder="Masukan Jumlah Produk"
                            name="Jumlah_stock"
                            value={this.state.Jumlah_stock}
                            onChange={this.onChange}
                            />
                        </Col>
                    </Form.Row>
                    <br/>
                    <Form.Row controlId="exampleForm.ControlInput1">
                        <Col>
                        <Form.Group controlId="exampleForm.ControlTextarea1">
                            <Form.Label>Deskripsi Produk</Form.Label>
                            <br/>
                            <Form.Control 
                            as="textarea" 
                            rows="3"
                            name="Deskripsi"
                            value={this.state.Deskripsi}
                            onChange={this.onChange}
                            />
                        </Form.Group>    
                        </Col>
                    </Form.Row>
                    <br/>
                    <Form.Row controlId="exampleForm.ControlInput1">
                        <Form.Group>
                        <Form.File 
                        id="exampleFormControlFile1" 
                        label="Masukan Foto Produk" 
                        type="image"
                        name="image"
                        value={this.state.image}
                        onChange={this.onChange}
                        />
                        </Form.Group>
                    </Form.Row>
                    <br/>
                    <button 
                        type="submit"
                        className="btn btn-lg btn-primary btn-block"
                    >Submit</button>
                    <Form.Row controlId="exampleForm.ControlInput1" style={{ visibility: "hidden" }}>
                        <Col>
                        <Form.Group controlId="exampleForm.ControlInput1">
                            <br/>
                            <Form.Control 
                            as="text" 
                            name="id_user"
                            value={this.state.id_user}
                            onChange={this.onChange}
                            />
                        </Form.Group>    
                        </Col>
                    </Form.Row>
                    <Form.Row controlId="exampleForm.ControlInput1" style={{ visibility: "hidden" }}>
                        <Col>
                        <Form.Group controlId="exampleForm.ControlTextarea1">
                            <br/>
                            <Form.Control disabled
                            as="area" 
                            name="Nama_toko"
                            value={this.state.Nama_toko}
                            onChange={this.onChange}
                            />
                        </Form.Group>    
                        </Col>
                    </Form.Row>

                </Form>
            </div>
        )
    }
}
export default TambahProduk;

这是添加产品的axios用户功能的一部分

    export const addproduk = newProduk =>{
    return axios
    .post('product/addproduk',{
        id_user:newProduk.id_user,
        Nama_toko:newProduk.Nama_toko,
        Nama_Produk:newProduk.Nama_Produk,
        image: newProduk.image,
        Deskripsi:newProduk.Deskripsi,
        Price:newProduk.Price,
        Jumlah_stock:newProduk.Jumlah_stock
    })
    .then(res=>{
        console.log("produk di tambahkan")
        return res
    })
    .catch(err=>{
        console.log(err);
        return err;
    })
}

如何像使用邮递员一样上载？

Answer 1

图像不是值，而是文件。因此，在onChange函数中，您将image.target.name分配为值

尝试这样：

event.target.name === "image"? event.target.files[0] : event.target.value;

无法使用axios和nodejs的react后端上传图像

1 个答案: