显示来自 multipart/form-data 个解析器的图像而不保存

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

通过监听文件类型的input的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') + "'>"

显示来自 multipart/form-data 个解析器的图像而不保存

Display images from multipart/form-data parsers without saving

javascript

multipartform-data

node.js

express

formidable