как я показываю изображения, пересланные с axios в другом маршруте?

Я пересылаю изображения с axios в сервер и мне хотелось бы знать, как показывать изображения в другом маршруте например /images и что яркие изображения появились там.

Здесь немного кода jsx:

import React, { Component } from 'react';
import axios from 'axios';
import { ToastContainer, toast } from 'react-toastify';
import {Progress} from 'reactstrap';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFile: null,
      loaded: 0
    }
  }

  checkMimeType=(event)=>{
    //getting file object
    let files = event.target.files 
    //define message container
    let err = []
    // list allow mime type
   const types = ['image/png', 'image/jpeg', 'image/gif']
    // loop access array
    for(var x = 0; x<files.length; x++) {
     // compare file type find doesn't matach
         if (types.every(type => files[x].type !== type)) {
         // create error message and assign to container   
         err[x] = files[x].type+' is not a supported format\n';
       }
     };
     for(var z = 0; z<err.length; z++) {// if message not same old that mean has error 
         // discard selected file
        toast.error(err[z])
        event.target.value = null
    }
   return true;
  }
  maxSelectFile=(event)=>{
    let files = event.target.files
        if (files.length > 3) { 
           const msg = 'Only 3 images can be uploaded at a time'
           event.target.value = null
           toast.warn(msg)
           return false;
      }
    return true;
 }
 checkFileSize=(event)=>{
  let files = event.target.files
  let size = 2000000 
  let err = []; 
  for(var x = 0; x<files.length; x++) {
  if (files[x].size > size) {
   err[x] = files[x].type+'is too large, please pick a smaller file\n';
 }
};
for(var z = 0; z<err.length; z++) {// if message not same old that mean has error 
  // discard selected file
 toast.error(err[z])
 event.target.value = null
}
return true;
}
onChangeHandler=event=>{
  var files = event.target.files
  if(this.maxSelectFile(event) && this.checkMimeType(event) &&    this.checkFileSize(event)){ 
  // if return true allow to setState
     this.setState({
     selectedFile: files,
     loaded:0
  })
}
}
  onClickHandler = () => {
    const data = new FormData() 
    for(var x = 0; x<this.state.selectedFile.length; x++) {
      data.append('file', this.state.selectedFile[x])
    }
    axios.post("http://localhost:8000/upload", data, {
      onUploadProgress: ProgressEvent => {
        this.setState({
          loaded: (ProgressEvent.loaded / ProgressEvent.total*100),
        })
      },
    })
      .then(res => { // then print response status
        toast.success('upload success')
      })
      .catch(err => { // then print response status
        toast.error('upload fail')
      });
    }

 render() {
  return (
    <div className="container">
      <div class="form-group">
        <ToastContainer />
      </div>
      <div className="row">
        <div className="justify-content-center col-md-12 text-center">
            <form method="post" action="#" id="#">
              <label for="file" className="input-file-trigger">Choose your file</label>
              <div className="form-group files">
                <input type="file" name="file" id="file" className="input-file" 
                multiple onChange={this.onChangeHandler} />
              </div>
              <button type="button" className="btn btn-primary"
              onClick={this.onClickHandler} >Upload</button>
            </form>
            <div class="form-group my-5">
            <Progress max="100" color="primary" value={this.state.loaded} >{Math.round(this.state.loaded,2) }%</Progress>
            </div>
        </div>
      </div>
    </div> );
 }
}

export default App;

Здесь немного Express:

const express = require('express');
const app = express();
const multer = require('multer')
const cors = require('cors');

app.use(cors());

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'public/img')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + '-' +file.originalname )
    }
  })
  
const upload = multer({ storage: storage }).array('file');
  
app.get('/',function(req,res){
    return res.send('Hello Server')
})
app.post('/upload',function(req, res) {
    
    upload(req, res, function (err) {
     
        if (err instanceof multer.MulterError) {
            return res.status(500).json(err)
          // A Multer error occurred when uploading.
        } else if (err) {
            return res.status(500).json(err)
          // An unknown error occurred when uploading.
        } 
        
        return res.status(200).send(req.file)
        // Everything went fine.
      })
});

app.listen(8000, function() {
    console.log('App running on port 8000');
});
0
задан 09.08.2019, 00:54
1 ответ

Обычно ты можешь помещать каталог так называемый public в твой базовый маршрут ее aplicaciГіn backend node.js и allГ - помещать контент estГЎtico, который ты захотел.

TambiГ©n конечно посылать твои файлы, пересланные в эту папку, или подпапку, которую ты решал бы, с чем quedarГЎn доступные для того, чтобы увидеть их в соответствующем соединении.

присоединил Тебе соединения со всей этой informaciГіn.

Каталогов публичного контента node.js

Upload файлов node.js

0
ответ дан 01.12.2019, 22:22