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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 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
是否存在第一台收音机的说法
2021/03/01 无线电
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python反射用法实例简析
2017/12/22 Python
对python 命令的-u参数详解
2018/12/03 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python编程中类与类的关系详解
2019/08/08 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Python 如何创建一个线程池
2020/07/28 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
人民教师的自我评价分享
2014/02/21 职场文书
安全演讲稿大全
2014/05/09 职场文书