javascript - 在将图像保存到服务器之前如何使用 event.target.files 填充 img src

Question

我将图像保存到文件对象，然后使用该对象将其保存到服务器。

(ReactJS)

onChange(event) {
    this.setState({
      file: event.target.files[0],
      loaded: 0,
    });
  }

onClickHandler = () => {
    const { match: { params} } = this.props;
    const data = new FormData()
    console.log(this.state.file)
    data.append('file', this.state.file)
    axios.post(`http://localhost:3000/albums/${params.albumId}/upload`, data, {

    }).then(res => {
      console.log(res.statusText)
    })
  }

(NodeJS - image-upload.js)

const getImageByAlbumId = (request, response) => {
  const { id }  = request.params;

  db.pool.query('SELECT * FROM file WHERE album_id = $1 ORDER BY album_id ASC', [id], (error, results) => {
    if (error) {
      throw error
    } else {
    response.status(200).json(results.rows)
    console.log("getImageByAlbumId " + JSON.stringify(request.params));
   }
  })
}


const imageUpload = (req, res) => {
    var id = parseInt(req.params.id);
    message: "Error! in image upload."
     if (!req.file) {
          console.log("No file recieved");
          message = "Error! in image upload."
          console.log("status: danger");
     } else {
        console.log('file recieved');
        console.log(req.file);

         var query = db.pool.query('INSERT INTO file (name, type, size, path, album_id) VALUES ($1, $2, $3, $4, $5) ON CONFLICT (album_id) DO NOTHING RETURNING *', [req.file.filename, req.file.mimetype, req.file.size, req.file.path, id], (err, result) => {
            console.log('inserted data')
            if (err) {
                console.log(err)
            } else {
               console.log('inserted data')
               console.log(result)
         }
         });
         message = "Successfully uploaded";
         console.log("status: success");
     }

}

(NodeJS - index.js)

var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public')
    }, 
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' +file.originalname)
    }
})

var upload = multer({ storage: storage });
app.use('/public', express.static('public'));
app.use(upload.single('file'));

app.get('/albums/:id/images', image.getImageByAlbumId)
app.post('/albums/:id/upload', image.imageUpload);

我正在使用保存到服务器的文件，该文件使用 req.file.path 手动保存了数据库的路径。然后在 componentDidMount() 时将该路径添加到我的状态。然后我尝试使用该路径用于 img src。

<img style={{ width: "300px", height: "300px"}} src={this.props.file[0].path} />

我的问题是，如果没有任何内容加载到服务器，但我收到此错误:TypeError:无法读取未定义的属性“路径”。另外，当用户单击该图像时，我尝试将图像加载到 src 中，以便他们可以在将图像保存到数据库并重新加载页面之前在前端查看该图像。

所以我想知道如何在重新加载页面/从数据库检索文件之前使用 event.target.files[0] 在 src 中加载该图像，但也使用重新加载或保存到数据库时从数据库中获取图像。

Answer 1

File 对象没有 path 属性。您需要做的就是使用 URL.createObjectURL 来渲染所选文件。 。

例如:

import React, { useState } from "react";

export default function App() {
  const [image, setImage] = useState();
  const onChange = e => setImage(URL.createObjectURL(e.target.files[0]));

  return (
    <div className="App">
      <input type="file" onChange={onChange} />
      {image && <img src={image} alt="The current file" />}
    </div>
  );
}

检查这个CodeSandbox举个例子