Question

在此question中，通过multipart / form-data解析器上传的图像保存在临时文件夹const tempPath = req.file.path中。然后将它们复制到指定的目录const targetPath = path.join(__dirname, "./uploads/image.png");，然后可以将这些图像显示为<img src="/uploads/image.png" />

我了解浏览器无法在系统的临时文件夹中显示图像。是否有另一种方法可以显示图像而不复制上面的图像？我可以将req.file转换为在<img />中显示吗？

Answer 1

通过侦听具有文件类型的输入的onChange事件，可以在客户端上显示图像而无需将图像发送到服务器端。这就是我对ReactJS（Demo on CodeSandbox）

的处理方式

class App extends React.Component {
    state = { imageSrc: '' };

    onImageChange = (event) => {
        if(event.target.files.length !== 0) {
            const reader = new FileReader();

            reader.onload = (e) => {
            this.setState({ imageSrc: e.target.result });
        }

        reader.readAsDataURL(event.target.files[0]);
    }
 }

  render() {
        return (
            <div className="App">
                <input type="file" accept="image/*" onChange={this.onImageChange} />
                {this.state.imageSrc ? <img src={this.state.imageSrc} /> : null}
            </div>
        );
   }
}

希望有帮助。让我知道我是否误解了您的问题

Answer 2

这里有一个python/Flask的解决方案，我相信你可以把它适配到其他语言

这是您在服务器上的请求中的图像文件：

uploaded_file = request.files.get('image')

在 Flask 中，您可以将其显示给用户而无需保存，如下所示：

return "<img src='data:image/jpeg;base64, " + base64.b64encode(uploaded_file.read()).decode('ascii') + "'>"

在不保存的情况下显示来自多部分/表单数据解析器的图像

2 个答案: