Vue 前端显示文件流图片
简介通过前端vue发送用户图片,后端flask进行处理后返回以文件流形式的图片。前端代码<template><v-container>// 注意一个vue文件中只能有一个lable,否则npm run serve 会卡死<input class="file" name="file" type="file" accept="image/png,image/gif,ima
·
简介
通过前端vue发送用户图片,后端flask进行处理后返回以文件流形式的图片。
前端代码
<template>
<v-container> // 注意一个vue文件中只能有一个lable,否则npm run serve 会卡死
<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update" />
<img style="width:180px" :src="img" >
</v-container>
</template>
<script>
export default {
data: () => ({
img : ""
}),
methods: {
update(e){
let file = e.target.files[0];
let param = new FormData(); //创建form对象
param.append('file',file);//通过append向form对象添加数据
console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
this.$axios.post('http://127.0.0.1:5000/upload',param,{headers:{'Content-Type':'application/x-www-form-urlencoded' }}, {responseType:"arraybuffer"}) // RESPONSE-TYPE 要定义成arraybuffer或blob
.then(res=>{
this.img = 'data:;base64,' + res.data
})
.catch(function (error) {
console.log(error);
})
}
}
}
</script>
后端代码
from flask import Flask, render_template, request, jsonify,send_file, make_response
from flask_cors import CORS
import os
import json
from io import BytesIO
from PIL import Image
import base64
def return_img_stream(img_local_path):
'''
将图片文件转码成文件流,便于前端传输
'''
img_stream = ''
with open(img_local_path, 'rb') as img_f: #'rb' 允许打开二进制的图片
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream)
return img_stream
@app.route('/upload',methods=["POST"])
def upload():
file_obj = request.files['file']
if file_obj is None:
# 表示没有发送文件
return "未上传文件"
file_path = os.path.join(app.config['UPLOAD_FOLDER'], "1.jpg")
file_obj.save(file_path)
resp = return_img_stream(file_path)
return resp
if __name__ == "__main__":
app.run()
关键问题
- 图像的转码 base64
with open(img_local_path, 'rb') as img_f: #'rb' 允许打开二进制的图片
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream)
- vue接受后端过来的数据
res=>{
this.img = 'data:;base64,' + res.data
}
- 前端显示图片
<img style="width:180px" :src="img" >
参考
更多推荐
已为社区贡献4条内容
所有评论(0)