iview -- 上传图片

逃离我推掉我的手 2021-09-19 12:56 345阅读 0赞

##### 加载后端传回的base64格式的图片文件， #####

<img src="data:image/jpeg;base64,xxxxxxxxxxxxxxxxxxx" alt="" />

**注意**：但是这种方法不兼容IE6/7，使用时要注意！

<template>
      <div>
        <div class="imageWrap">
          <img :src="insideSrc" alt="">
        </div>
        <Upload
          action="image/upload"
          :accept="acceptFile"
          :before-upload="beforeUpload">
          <Button style="width: 150px;" type="primary">上传图片</Button>
        </Upload>
      </div>
    </template>
    <script>
    export default {
      name: 'ImageUpload',
      data () {
        return {
          // 展示选中的的imageSrc
          insideSrc: '',
          // 接受上传的文件类型
          acceptFile: 'image/png,image/jpeg'
        }
      },
      methods: {
        beforeUpload (file) {
          if (!this.acceptFile.split(',').includes(file.type)) {
            this.$Message.warning('未选中图片格式的文件')
            return false
          }
          if (file.size / 1024 > this.maxSize) {
            this.$Message.warning(`文件大小超过了${this.maxSize}KB`)
            return false
          }
          // 转换为base64
          const reader = new FileReader()
          // 将读取到的文件编码成Data URL
          reader.readAsDataURL(file)
          reader.onload = (event) => {
            this.insideSrc = event.srcElement.result
          }
          // 若返回 false 则停止上传,此时中断则判断大小无法使用max-size属性判断
          return false
        }
      }
    }
    </script>
    <style scoped>
    .imageWrap {
      width: 100%;
      height: 200px;
      border: 1px solid red;
    }
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关 apiclod 上传图片_apiCloud上传图片

Hello APP height:100%; \} \wrap\{ height:100%; display:-webkit-box; display:-webki

野性酷女/ 2022年10月31日 00:57/ 0 赞/ 295 阅读

相关 iview获取_.NET Core+IView+Vue集成上传图片功能

(给DotNet加星标，提升.Net技能) > 转自：张子阳 > > cnblogs.com/ZaraNet/p/10212821.html 项目里有上传图片的功能，当然

女爷i/ 2022年10月28日 10:22/ 0 赞/ 177 阅读

相关图片上传

上篇博客已经介绍了文件的上传，这次就简单总结一下图片的上传，以及上传图片的显示。利用三个控件：Input（File）、Button控件、Image控件，页面简单设计如下图：

川长思鸟来/ 2022年06月03日 08:26/ 0 赞/ 257 阅读

相关图片上传

1, 定义模型 class UserLearn(models.Model): u_name = models.CharField(max_length=16) u_i

缺乏、安全感/ 2022年06月03日 02:27/ 0 赞/ 277 阅读

相关图片上传

html <button type="button" class="btn btn-primary" οnclick="F\_Open\_dialog2()">Impor

小咪咪/ 2022年06月01日 14:24/ 0 赞/ 293 阅读

相关 iview 上传附件

iview 上传附件 ![在这里插入图片描述][2019012316283844.gif] <!DOCTYPE html> <html>

忘是亡心i/ 2022年04月23日 03:42/ 0 赞/ 272 阅读

相关图片上传

文件上传流程： 1、定义 <input type="file" name="file" accept="image/\" onchange="uploadimage(th

ゝ一世哀愁。/ 2022年04月02日 11:46/ 0 赞/ 362 阅读

相关上传图片

<img src="~/Content/img/btn\_1.png" class="img-responsive" id="a\_pic"> <input class="

￡神魔★判官ぃ/ 2021年09月30日 09:54/ 0 赞/ 623 阅读

相关 iview -- 上传图片

加载后端传回的base64格式的图片文件， <img src="data:image/jpeg;base64,xxxxxxxxxxxxxxxxxxx" alt="

逃离我推掉我的手/ 2021年09月19日 12:56/ 0 赞/ 346 阅读

相关上传图片

// 允许上传的图片后缀 $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = expl

蔚落/ 2021年09月18日 22:22/ 0 赞/ 548 阅读