vue项目前端处理后端返回的图片

偏执的太偏执、 2023-03-13 12:16 6阅读 0赞

###### 做登录或者注册的时候，会用到验证码，前端会接收后端发的验证码图片 ######

![在这里插入图片描述][202005131620196.png_pic_center]

就像这样的

<el-form-item label="验证码" prop="name">
      <el-input style="width: 147px;" v-model="ruleForm.verification" placeholder="请填写验证码"></el-input>
      <div class="verification">
        <img :src="this.verificationImg" alt="" @click="acquireVerification">
      </div>
    </el-form-item>

我这是使用了 element-ui ，普通的输入框也是可以的

data () { 
      return { 
        verificationImg: '',
        ruleForm: { 
          verification: ''
        }
    },
    
    acquireVerification () { 
    	// {responseType: 'blob'} ，不加这个返回的就是乱码
      axios.get('/api/verifyCode', { responseType: 'blob'}).then((response) => { 
        console.log(response.data)
        this.verificationImg = window.URL.createObjectURL(response.data)
        console.log(this.verificationImg)
      })
    }
    
    
    mounted () { 
      this.acquireVerification()
    }

.verification { 
      position: absolute;
      right: 0px;
      top: 0px;
    }

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临  
![在这里插入图片描述][20201130110924764.jpg_pic_center]

[202005131620196.png_pic_center]: /images/20230312/fc7be3fdacd8449bb7c8a02828c20375.png
[20201130110924764.jpg_pic_center]: /images/20230312/c7d421009b5a420eb6edbce218e76b65.png

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关后端如何返回一个（图片）文件流，并在前端vue展示。

后端部分可分为三步： 1，获取文件参数（非必须，根据自己情况添加） 2，获取文件 3，以流形式返回具体代码如下： / 获取文件的流

ゝ一纸荒年。/ 2023年10月08日 21:31/ 0 赞/ 26 阅读

相关前端处理后端返回的二进制流文件

1、前端处理后端返回的二进制流文件 var xhr = new XMLHttpRequest(); xhr.open("post", "/downl

た入场券/ 2023年06月24日 04:45/ 0 赞/ 26 阅读

相关 vue项目前端处理后端返回的图片

做登录或者注册的时候，会用到验证码，前端会接收后端发的验证码图片 ![在这里插入图片描述][202005131620196.png_pic_center] 就像这样的

偏执的太偏执、/ 2023年03月13日 12:16/ 0 赞/ 7 阅读

相关前端vue项目打包,后端maven项目打包

前端vue直接在VScode里输入命令 ![在这里插入图片描述][20200512161417549.png] npm run build 前端会多出来这样

素颜马尾好姑娘i/ 2023年03月13日 06:40/ 0 赞/ 146 阅读

相关 vue中后端做Excel导出功能返回数据流前端如何做处理

项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来

灰太狼/ 2023年02月22日 12:19/ 0 赞/ 14 阅读

相关 axios 后端返回流转成图片

axios请求返回流转换成图片 <img :src="codesrc" @click="getImgCode" class='br_img'> 实现方法（从

桃扇骨/ 2023年02月10日 07:50/ 0 赞/ 6 阅读

相关 Vue前端接收后端返回的图片、验证码图片

[https://blog.csdn.net/qq\_43477721/article/details/106100824][https_blog.csdn.net_qq_43

柔光的暖阳◎/ 2022年11月11日 05:16/ 0 赞/ 194 阅读

相关 vue中处理后台返回的图片流，并将图片流显示在前端（转载）

转载于 [https://blog.csdn.net/qq\_41948525/article/details/105238646][https_blog.csdn.net_q

╰半橙微兮°/ 2022年09月16日 04:52/ 0 赞/ 1413 阅读

相关后端返回图片地址，图片不显示的问题

接口返回的数据直接放到浏览器里就可以显示出图片，但是在项目里却显示不出来图一：返回的图片地址 ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

分手后的思念是犯贱/ 2022年02月15日 00:23/ 0 赞/ 536 阅读

相关 vue 前端传图片文件，后端接收

-------------------- vue端 1、在 main.js 文件中添加 const upload = axios.create({

た入场券/ 2022年02月04日 01:09/ 0 赞/ 1110 阅读