Vue+Flask实现图片传输功能


Posted in Vue.js onApril 01, 2022

本文实例为大家分享了Vue+Flask实现图片传输功能的具体代码,供大家参考,具体内容如下

完整流程:

1.图片转为formdata 传输到后端
2.后端接收后,确定文件后缀名无误,修改文件名并保存到固定的路径中
3.前端请求图片
4.后端根据图片名字返回图片数据流
5.前端将数据流处理,转为图片

1.Vue上传

<template>
    <div>
        <input type="file" class="file" id ='file'> 
        <input type="submit" @click="uploadClick">
    </div>
</template>
<script>
export default {
   
    data () {
        return {}
    },
    methods:{
        uploadClick(){
            console.log(document.getElementById('file').files[0]);
            var formData = new window.FormData() 
            formData.append('file',document.getElementById('file').files[0])
            upload(formData)
            
        }   
    }
}
</script>

//这是封装的请求
export const upload = (file) => {
  return request({
    url: '/api/uavprp/upload',
    data: file,
    method: 'post',
    headers: { 
      'Content-Type': 'multipart/form-data'
     },
  })
}

2.Flask接收

#请求中获取到上传的图片
a = request.files.get('file')
#限制文件后缀名必须为图片的类型
allowed_filename = set(['png', 'jpg', 'JPG', 'PNG'])
isallowed = '.' in filename and filename.rsplit('.', 1)[1] in allowed_filename
path = basedir + "/image/"  #这里的image是自己创建的保存图片文件夹路径
img_name = change_file_name(a.filename,ImgID)#这是我自己定义的一个方法 为了修改图片的名字为随机生成的唯一ID,同时不修改后缀名
file_path = path + img_name#完整的保存路径加图片名
a.save(file_path)#保存

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

<template>
    <div>
      <img :src="ferUrl"/>
    </div>
</template>
<script>
export default {
   
    data () {
        return {
            imgUrl: "",
        }
    },
    created(){
        getImg("ImgNXTIP298.jpg").then((res) => {
        this.imgUrl = window.URL.createObjectURL(res.data);//这里请求接收的一定是Blod类型数据
        console.log(this.imgUrl);
      });
    }
}
</script>


//封装的图片请求
export const getImg = (imgID) => {
  return request({
    url: '/api/ferchoosen/getFerImg',
    method: 'get',
    responseType:"blob",
    params: {
      imgID
    }
  })
}

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

imgID = request.args["imgID"]
    if imgID == None:
        return output(msg="该图片不存在")
    path = basedir + "/image/"
    image_data = open(os.path.join(path, '%s' % imgID), "rb").read()
    response = make_response(image_data)
    response.headers['Content-Type'] = 'image/png'#返回的内容类型必须修改
    return response

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue单元格多列合并的实现
Nov 26 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 #Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 #Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 #Vue.js
vue ref如何获取子组件属性值
Mar 31 #Vue.js
vue如何使用模拟的json数据查看效果
vue+iview实现手机号分段输入框
Mar 25 #Vue.js
Vue3中toRef与toRefs的区别
Mar 24 #Vue.js
You might like
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php实现搜索类封装示例
2016/03/31 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
vue多个元素的样式选择器问题
2019/11/29 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
Python matplotlib可视化实例解析
2020/06/01 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
英语教育专业自荐信
2014/05/29 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
护士年终考核评语
2014/12/31 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
用Python生成会跳舞的美女
2022/01/18 Python
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript