Vue 前端显示文件流图片

简介

通过前端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()

关键问题

1. 图像的转码 base64

  with open(img_local_path, 'rb') as img_f:  #'rb' 允许打开二进制的图片
    img_stream = img_f.read()
    img_stream = base64.b64encode(img_stream)

2. vue接受后端过来的数据

res=>{
                this.img = 'data:;base64,' + res.data
     }

3. 前端显示图片

<img style="width:180px" :src="img" > 

参考

[1] base64 , blob,url图片的处理方式