javascript - 使用从 flask-restful API 接收的 ReactJS 渲染图像
问题描述
我正在发送带有烧瓶休息的图像,但我无法使用 ReactJS 渲染它。我尝试使用 btoa 和 blob 来解决问题,但没有结果。这是我写的代码
烧瓶休息代码:
class UploadImage(Resource):
UPLOAD_FOLDER = 'img'
parser = reqparse.RequestParser()
parser.add_argument('file',
type=werkzeug.datastructures.FileStorage,
location='files',
required=True, help='Must provide username')
def post(self):
data = self.parser.parse_args()
if data['file'] == "":
return {
'data':'',
'message': 'No File Found',
'status': 'Error'
}
photo = data['file']
if photo:
filename = 'input.png'
path = os.path.join(self.UPLOAD_FOLDER,filename)
photo.save(path)
# with open(path, "rb") as f:
# encoded_image = f.read()
# print(type(encoded_image))
return send_file(path, mimetype='image/png')
反应代码:
onButtonClick = () => {
const fd = new FormData();
fd.append('file', this.state.image, this.state.image.name)
axios.post('http://localhost:5000/image', fd).then(res => {
this.setState({
features: res.data
})
})
}
render() {
const { features } = this.state
return (
<div className="App">
<input
type='file'
onChange={this.onInputChange}
/>
<button onClick={this.onButtonClick}>Upload</button>
<br />
{features && <img src={features} alt='some text'/>}
</div>
);
}
有人可以帮我解决这个问题吗谢谢。
解决方案
推荐阅读
- oauth-2.0 - 如何将 Rabbitmq 身份验证(使用 MQTT)与 oauth2 集成
- linux - Visual Studio linux项目的boost链接错误
- c - C中字符串中的MD5散列
- javascript - 重现相同的行为
- asciidoctor - 为什么片段包含 spring-restdocs-asciidoctor 的错误?
- bash - 从位于其他服务器上的 CLI 程序获取数据的正确方法是什么?
- python - 使用 python3 打印字符串格式:如何从数组打印?
- varnish-vcl - varnish配置后端主机域名还是localhost?
- ios - CAShapeLayer的定位
- python - 我的代码有一个错误,缩进中的制表符和空格不一致尝试了一些修复,但没有任何效果