精华内容
下载资源
问答
  • Vue 前端显示文件流图片

    千次阅读 2020-08-07 15:17:53
    通过前端vue发送用户图片,后端flask进行处理后返回以文件形式的图片。 前端代码 <template> <v-container> // 注意一个vue文件中只能有一个lable,否则npm run serve 会卡死 <input class=...

    简介

    通过前端vue发送用户图片,后端flask进行处理后返回以文件流形式的图片。

    前端代码

    <template>
        <v-container>  // 注意一个vue文件中只能有一个lable,否则npm run serve 会卡死
            <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update" />
            <img style="width:180px" :src="img" > 
        </v-container>
    </template>
    
    
    <script>
    export default {
     data: () => ({
        img : ""
     }),
    methods: {
          update(e){
            let file = e.target.files[0];
            let param = new FormData(); //创建form对象
            param.append('file',file);//通过append向form对象添加数据
            console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
            this.$axios.post('http://127.0.0.1:5000/upload',param,{headers:{'Content-Type':'application/x-www-form-urlencoded' }}, {responseType:"arraybuffer"}) // RESPONSE-TYPE 要定义成arraybuffer或blob
              .then(res=>{
                    this.img = 'data:;base64,' + res.data
              })
              .catch(function (error) {
                console.log(error);
              })
          }
        }
    }
    </script>
    

    后端代码

    
    from flask import Flask, render_template, request, jsonify,send_file, make_response
    from flask_cors import CORS
    import os
    import json
    from io import BytesIO
    from PIL import Image
    import base64
    
    def return_img_stream(img_local_path):
    ''' 
    将图片文件转码成文件流,便于前端传输
    '''
      img_stream = ''
      with open(img_local_path, 'rb') as img_f:  #'rb' 允许打开二进制的图片
        img_stream = img_f.read()
        img_stream = base64.b64encode(img_stream)
      return img_stream 
    
    @app.route('/upload',methods=["POST"])
    def upload():
        file_obj = request.files['file']
        if file_obj is None:
            # 表示没有发送文件
            return "未上传文件"
        
        file_path = os.path.join(app.config['UPLOAD_FOLDER'], "1.jpg")
        file_obj.save(file_path)
        resp = return_img_stream(file_path)
        return resp
    
    if __name__ == "__main__":
        app.run()
    

    关键问题

    1. 图像的转码 base64
      with open(img_local_path, 'rb') as img_f:  #'rb' 允许打开二进制的图片
        img_stream = img_f.read()
        img_stream = base64.b64encode(img_stream)
    
    1. vue接受后端过来的数据
    res=>{
                    this.img = 'data:;base64,' + res.data
         }
    
    1. 前端显示图片
    <img style="width:180px" :src="img" > 
    

    参考

    [1] base64 , blob,url图片的处理方式

    展开全文
  • 图片流转图片地址 通过window.URL.createObjectURL可以将图片流转化为...如果转化失败,请查看获取到的文件的类型(typeof),如果为string,则查看是否是统一的处理将返回值进行的json转化(查看自己的前端框架配...

    图片流转图片地址

    通过window.URL.createObjectURL可以将图片流转化为本地请求地址,然后直接通过<img src="转化后的地址"/>

    注意:

    1. 需要指定返回类型为blob(responseType: ‘blob’)
    2. 如果转化失败,请查看获取到的文件流的类型(typeof),如果为string,则查看是否是统一的处理将返回值进行的json转化(查看自己的前端框架配置是否做了统一处理;查看main.js中是否存在类似代码if (process.env.NODE_ENV !== 'production') require('@/mock'),如果存在要注释掉)
    展开全文
  • Vue上传图片图片,img标签显示图片

    千次阅读 2019-08-22 15:55:52
    有很多时候,会有图片上传的需求,用户选择上传图片后,要求在界面进行显示,当点击保存,或者确定按钮的时候上传到服务器。 话不多说直接上代码 <input type="file" @change="uploadImg" ref="uploadFile" name...

    前言

    有很多时候,会有图片上传的需求,用户选择上传图片后,要求在界面进行显示,当点击保存,或者确定按钮的时候上传到服务器。
    话不多说直接上代码

    <div class="upload-con">
          <input type="file" @change="uploadImg" ref="uploadFile" name="file"
                 style="width: 100%; height: 100%;cursor: pointer;position: absolute;left: 0;top: 0;opacity: 0">
          <img :src="imgUrl" alt="" style="width: 100%;height: 100%;position: absolute;left: 120px;">
        </div>
    

    为了能让大家看的明白,所以很多样式是直接写的行内。
    效果如下图:

    这个背景图是UI小姐姐做的,在.upload-con’ 的背景里面
    话不多说,直接上js代码:

         uploadImg() {//input的change事件
            this.uploadMsg = this.$refs.uploadFile.files[0]; //文件流
            this.imgUrl = this.getImg(this.uploadMsg); //图片地址
          },
          getImg(file) {
            let url = '';
            if (window.createObjectURL !== undefined) { // basic
              url = window.createObjectURL(file);
            } else if (window.URL !== undefined) { // mozilla(firefox)
              url = window.URL.createObjectURL(file);
            } else if (window.webkitURL !== undefined) { // webkit or chrome
              url = window.webkitURL.createObjectURL(file);
            }
            return url;
          }
    

    这样就将本地上传的图片显示在界面,同时存在定义的uploadMsg 变量里面 ,图片地址存在imgUrl 变量里面,当然上面的方法同样适用后台返回二进制流,前端 img 标签的显示图片问题
    效果如下:
    在这里插入图片描述
    好了,就这样完美解决图片上传显示问题,还有后台返回二进制流显示的问题
    转载需标注!
    还请多多指教!

    展开全文
  • vue显示图片 后端返回字符串

    千次阅读 2019-04-26 15:00:45
    vue显示多张图片-接收后端数据 后端返回字段如下 可以看见,每张图片的相对路径我用逗号拼接。 前端接收主要代码 <ul style="padding: 3px"> <li class="imgsh" id="imgUrls"><img v-for="item ...

    vue显示多张图片-接收后端数据

    1. 后端返回字段如下
      后端返回的字段
      可以看见,每张图片的相对路径我用逗号拼接。
    2. 前端接收主要代码
    <ul style="padding: 3px">
              <li class="imgsh" id="imgUrls"><img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) "></li>
               <!--<li><img src="../../../image/video_pic/13163000.jpg"></li>-->
               <!--<li v-for ="item in imgurls" :key="item.url">-->
                   <!--<img :src="item.url" alt="imgurls">-->
                   <!--&lt;!&ndash;<p>{{item.CnName}}</p>&ndash;&gt;-->
               <!--</li>-->
    </ul>
    
    <img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) ">
    

    src中主要是在vue的目录下建立了文件夹image,再在image下面建立video_pic。要存在vue的根目录才行。网上很多代码直接用变量访问**"…/…/image"** 这种类型的路径,也不知道他们是怎么成功的,反正我没有成功。
    直接在src中这样访问当然没有问题,但是一旦加入变量根本不行,我找了好多资料,自己搞了半天才发现必须加require字段才行。不吐槽了

    1. 前端接收后端代码
    getPicPath(this.sizeForm.hospitalcard)
       .then(response => {
    
    
          this.imgurls = response.data.split(',');
           console.log( this.imgurls);
           // const target = {};
           // let indexs = 0;
           // imgtemp.forEach(a=>{
           //     // console.log(a);
           //     const source = JSON.parse(`{"${indexs}":"${a}"}`);//造出对象
           //     indexs++;
           //     Object.assign(target,source);
           // });
           // console.log(target);
    
       })
    

    我的代码进行整合了的,大家测试可以利用axios,直接访问后端端口的接口,比如:
    在这里插入图片描述
    这样就能成功了,保证能行。贴上我的效果图
    这是我的效果图
    4. 还有一种就是针对图片少的时候返回base64码的情况,后端当然是直接返回图片的base64码了。
    前端是这样的

     <ul>
            <li class ="img_iden" id="imgUrl"></li>
      </ul>
    

    在方法里面,接收返回的数据进行显示,代码为

    // let imgurls =[];
                // imgurls = res.data.imgUrl.split(",");
                // for(let i=0;i<imgurls.length;i++){
                //     let img=new Image();
                //     img.src ="data:image/jpg;base64,"+imgurls[i];
                //     console.log(img.src);
                //     img.style.width = 148+"px";
                //     img.style.height = 148+"px";
                //     let imgContainer=document.getElementById("imgUrl");
                //     imgContainer.appendChild(img);
                // }
    

    这段代码是可行的,只不过我不用这种方法了,就把它注释掉了。因为base64码太长了,我不好调试,占一大块屏幕。

    展开全文
  • uniapp: this.$request是自己封装的 uni.request函数,responseType也需要...-- 显示图片的位置--> <image :src="QRImg"></image> </view> </template> <script> export default {
  • 产品需求,pc端添加图片瀑布。废话少说直接上干货。 简介:我使用的是vue-waterfall2+vue-lazyload两个插件。 特点:使用简单,自定义样式修改灵活方便。 Use: npm install vue-waterfall2@latest --save npm ...
  • 用axios请求后端接口,得到验证码图片,但前端无法直接显示验证码图片,这是因为后端返回的不是一个json字符串,而是一个文件格式,需要前端转换成base64编码。 发送请求的接口: export function GetCaptcha ...
  • Vue中使用axios下载流图片显示

    千次阅读 2019-12-25 10:58:24
    使用axios下载验证码的图片,并显示。 其中使用responseType为blob,具体参考我的博文: 下载文件,跨域获取Response Headers中响应头,以及IE无法下载文件 只不过这里是使用saveAs进行下载文件,而这里就需要去...
  • 第一步 axios({ method: 'get', url, responseType: 'arraybuffer' // 最为关键 }) .then(function (response) { that.src = 'data:image/jpeg;base64,' + that.arrayBufferToBase64(response.data) ...
  • 1.看下图(这是图片流,如果直接在img标签下的src中是没有用的)那怎么办呢,别慌往下看 2.解决方法 (1).在请求后端接口返回response const src = window.URL.createObjectURL(response)//这里也是关键,调用window...
  • 图片流转图片地址 通过window.URL.createObjectURL可以将图片流转化为本地请求地址,然后直接通过&lt;img src="转化后的地址"/&gt; findImageByDeploymentIdAndName(this.flowImgParamData)....
  • 简述Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况自定义指令,它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。一、注册自定义指令Vue自定义指令和组件一样存在着全局注册...
  • 1、应项目要求,后台返回二进制,而且乱码 2、红色为必须 this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), { responseType: 'arraybuffer' //指定返回数据的格式为blob...
  • vue下载二进制流图片

    千次阅读 2018-09-21 16:32:43
    1、应项目要求,后台返回二进制,而且乱码 2、红色为必须 this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), { responseType: 'arraybuffer' //指定返回数据的格式...
  • Vue原生图片瀑布

    千次阅读 2020-05-20 14:53:51
    图片瀑布可以节省图片的排版空间,美观图片的排列,避免图片排列的参差不齐。 实现图片瀑布可以固定宽(花瓣),也可以固定高(百度图片),看个人需求,我的需求是宽固定。 如果图片的排列不适用瀑布的话,...
  • vue获取图片流数据并展示

    千次阅读 2020-11-09 11:09:38
    vue获取图片流数据并展示一、问题描述二、数据获取三、数据展示1.window.URL.createObjectURL()(1)[URL](https://developer.mozilla.org/zh-CN/docs/Web/API/URL)(2)[createObjectURL]...封装blob数据3....
  • vue+springboot图片上传和显示

    千次阅读 2020-02-14 14:44:42
    在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能。 二、环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三、正文 在客户开发一套门户管理系统...
  • 第一步、设置图片显示区域 <img :src="currentPicture" alt=""> 第二步、配置获取图片流接口 export function getCurrent(dev){ return api({ url:'/xxx', methid:'get', responseType:'blob', params:{...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,596
精华内容 3,438
关键字:

vue显示流图片

vue 订阅