flask上传图片接口,vue flask 部署

　　这篇文章主要为大家详细介绍了真空烧瓶实现图片传输功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了真空烧瓶实现图片传输功能的具体代码，供大家参考，具体内容如下

完整流程：

　　1.图片转为上传传输到后端

　　2.后端接收后，确定文件后缀名无误，修改文件名并保存到固定的路径中

　　3.前端请求图片

　　4.后端根据图片名字返回图片数据流

　　5.前端将数据流处理，转为图片

　　1.Vue上传

　　模板

　　差异

　　输入类型=文件类=文件id=文件

　　输入类型=提交@click=uploadClick

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data () {

　　返回{}

　　},

　　方法：{

　　uploadClick(){

　　控制台。日志(文档。getelementbyid(“文件”).文件[0]);

　　var表单数据=新窗口。表单数据()

　　formData.append(file ，document.getElementById(file ).文件[0])

　　上传（表单数据)

　　}

　　}

　　}

　　/脚本

　　//这是封装的请求

　　导出常量上传=(文件)={

　　退货请求({

　　网址：“/API/无人机PRP/上传”，

　　数据：文件，

　　方法： post ，

　　标题：{

　　"内容类型":"多部分/形式数据"

　　},

　　})

　　}

　　2.Flask接收

　　#请求中获取到上传的图片

　　a=request.files.get(file )

　　#限制文件后缀名必须为图片的类型

　　allowed_filename=set([png ， jpg ， JPG ， PNG])

　　我允许="。"在文件名和filename.rsplit( . 中，1)[1]在允许的文件名中

　　path=basedir /image/ #这里的图像是自己创建的保存图片文件夹路径

　　img _ name=change _ file _ name(a . filename，ImgID)#这是我自己定义的一个方法为了修改图片的名字为随机生成的唯一ID，同时不修改后缀名

　　file_path=path img_name#完整的保存路径加图片名

　　保存(文件路径)#保存

　　3.Vue请求图片并转换返回的数据流为图片展示

　　模板

　　差异

　　img :src=ferUrl/

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data () {

　　返回{

　　imgUrl: ，

　　}

　　},

　　已创建(){

　　getImg(ImgNXTIP298.jpg ).然后((res)={

　　this.imgUrl=window .网址。createobjecturl(RES . data)；//这里请求接收的一定是二进制数据类型数据

　　控制台。日志(这个。imgurl)；

　　});

　　}

　　}

　　/脚本

　　//封装的图片请求

　　导出常量getImg=(imgID)={

　　退货请求({

　　URL:"/API/fer choosed/getfer img "，

　　方法：“得到”，

　　响应类型：“blob”，

　　参数：{

　　imgID

　　}

　　})

　　}

　　4.Flask接收前端请求返回图片数据流

　　imgID=request.args[imgID]

　　如果imgID==无：

　　返回输出（消息=该图片不存在)

　　path=basedir /image/

　　image _ data=open(OS。路径。join(路径， %s % imgID， rb ).阅读()

　　响应=生成响应（图像数据)

　　回应。标题[ Content-Type ]= image/png #返回的内容类型必须修改

　　返回响应

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。