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 17 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
ant design vue的form表单取值方法
Jun 01 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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php cli换行示例
2014/04/22 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
Python数组定义方法
2016/04/13 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
pytorch 预训练层的使用方法
2019/08/20 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
广州品高软件.net笔面试题目
2012/04/18 面试题
入党综合考察材料
2014/06/02 职场文书
人大调研汇报材料
2014/08/14 职场文书
七一讲话心得体会
2014/09/05 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
MySQL 开窗函数
2022/02/15 MySQL
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers