сломанное изображение при предварительном просмотре загруженного изображения с использованием реакции и express бэкэнда - PullRequest
0 голосов
/ 15 января 2020

загрузка работает нормально. Но я не могу получить доступ к изображению для предварительного просмотра.

class uploadMyFile extends React.Component {
    constructor(props) {
    super(props);
    this.state ={
        file: null,
        fileUrl:null
    };
    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
}
onFormSubmit(e){
    e.preventDefault();
    const formData = new FormData();
    formData.append('myImage',this.state.file);
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    };
    axios.post("/upload",formData,config)
        .then((response) => {
            alert("The file is successfully uploaded");
            console.log(response.data.results.path);
            this.setState({fileUrl:response.data.results.path})
        }).catch((error) => {
    });
}
onChange(e) {
    this.setState({file:e.target.files[0]});
}

render() {
    return (
        <div id="App">
        <SideBar pageWrapId={"page-wrap"} outerContainerId={"App"} />
        <div id="page-wrap" >
        <div >
            </div></div>
        <div style={{marginTop:"100px"}}>
        <form onSubmit={this.onFormSubmit}>
            <h1>File Upload</h1>
            <input type="file" name="myImage" onChange= {this.onChange} />
            <button type="submit">Upload</button>
            <img src= {this.state.fileUrl}/>
        </form></div></div>
    )}} export default uploadMyFile

    app.use(express.static(path.join(__dirname, 'newapp/public')));
    app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/newapp/public/index.html'));
    });
    const storage = multer.diskStorage({
    destination: "./public/uploads/",
    filename: function(req, file, cb){
    cb(null,"IMAGE-" + Date.now() + path.extname(file.originalname));
    } });
    const upload = multer({
    storage: storage,
    limits:{fileSize: 1000000},
    }).single("myImage");

    app.post('/upload', function (req, res) {
    upload(req, res, function (err) {
    console.log("Request ---", req.body);
    console.log("Request file ---", req.file);//Here you get file.
    /*Now do where ever you want to do*/
    if(!err) {
    return res.status(200).json({
            results:req.file
        });
    }
    })
    })

ошибка на стороне сервера:

Ошибка: ENOENT: такого файла или каталога нет, stat 'C: \ Users \ Weboffice PC 2 \ React \ реаги- express -example \ newapp \ build \ index. html '

Ошибка на консоли:

GET http://localhost: 3000 / public / uploads /IMAGE-1579084747954.jpg 404 (не найдено)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...