iview -- 上传图片

逃离我推掉我的手 2021-09-19 12:56 389阅读 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 条评论，389人围观）

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

相关阅读

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

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

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

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

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

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

相关图片上传

1.html <div class="work\_bolck" data-id="\{$cinfo5.id|default=0\}" d

Myth丶恋晨/ 2022年09月26日 02:41/ 0 赞/ 57 阅读

相关上传图片

//servlet request.setCharacterEncoding("UTF-8"); InputStream input = null;

约定不等于承诺〃/ 2022年06月08日 05:22/ 0 赞/ 95 阅读

相关图片上传

1.页面表单  <div class="easyui-window" title="对商品进行添加或者修改" id="standardW

浅浅的花香味﹌/ 2022年05月15日 16:07/ 0 赞/ 160 阅读

相关 iview 上传附件

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

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

相关图片上传

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

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

相关上传图片

开发工具与关键技术：Visual Studio 作者：肖广斌撰写时间：2019年5月12日在做项目时，我们在完善一些个人信息、或者一些页面时，我们需要用到图片，

本是古典何须时尚/ 2022年01月31日 12:45/ 0 赞/ 394 阅读

相关上传图片

@Service public class FileServiceImpl implements FileService { privat

柔情只为你懂/ 2021年12月23日 13:47/ 0 赞/ 491 阅读

相关 iview -- 上传图片

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

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