前端提交表单至后端，经python执行返回png图片，前端显示回传图片

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>

点击确定键，将表单form参数，这里我以传入时间参数为例，传入后端，然后后端图片回传。

import dayjs from 'dayjs';
import { getImg } from "../api/index";

methods: {
    onSubmit() {
         starttime=this.ruleForm.publishDate   //form表单参数：v-model
         endtime = this.ruleForm.offlineDate   //form表单参数：v-model
 //dayjs(**).format("YYYY-MM-DD HH:mm:ss") 
 //**为格林威治时间，如：Sat Dec 04 2021 00:00:00 GMT+0800 (中国标准时间)
 //用dayjs插件，转化成年月日时分秒； 如：2021-12-04 00:00:00

         const query = {starttime,endtime};
         getImg(query).then(res => {
             console.log(res); 
             const srcs = window.URL.createObjectURL(res);
             this.imgSrc = srcs ;
         }); 
     }
     

    }

vue/cli4，用api模块实现axios,路径：src-api-index.js

export const getImg = query => {
    return request({
        url:'/api/getpng/',
        method :'post',
        data :query,
        responseType:'blob',
    })
}

我这里是使用blob类型去展示图片，因为觉得方便，后端传过来就是blob

def getpng(request):
    if request.method == "POST":
        req=request.body
        requ=req.decode()
        res=json.loads(requ, strict=False)
        start=res['starttime']
        end=res['endtime']
        print(start)
        print(end)
        path="D:/5Glog.png"
        file=open(path,"rb")
        return HttpResponse(file.read(),content_type="image/png")

控制台收到的是： 

 对收到的blob,使用一句js就可以:

const srcs = window.URL.createObjectURL(res); 

页面上插入img：

<img :src="imgSrc">  

最终完成图片回显。