<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">
最终完成图片回显。