Vue 实现 Base64 图片上传

# 示例一

<input @change="uploadPhoto($event)" type="file" class="kyc-passin">
<img :src="formInline.img" alt="">

1
2

uploadPhoto (e) {
    // 利用fileReader对象获取file
    var file = e.target.files[0];
    var filesize = file.size;
    var filename = file.name;
    // 2,621,440   2M
    if (filesize > 2101440) {
        // 图片大于2MB
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {

        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        var imgcode = e.target.result;
        this.formInline.img=imgcode
        console.log(this.formInline.img);
    }
    
    // 获取本地图片地址
    // const _URL = window.URL || window.webkitURl;
    // this.imgUrl = _URL.createObjectURL(file);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 示例二

HTML部分

<input @change="uploadPhoto($event)" type="file" class="kyc-passin">
<span style="color: #777A7D">只能上传jpg/png文件，且不超过2MB</span>
<div v-show="formInline">
     <img :src="formInline" alt="" style="width: 100%;height: 100%;margin-top: 20px;">
</div>
<!-- 按钮想要做的好看，也可在input上绑定一个Id -->
<input id="uploadbtn" @change="uploadPhoto($event)" type="file" class="kyc-passin">
<!-- 然后自定义一个按钮，添加点击事件 -->
<button @click="uploadBtn">
   <i class="el-icon-upload"></i>
   上传
</button>

1
2
3
4
5
6
7
8
9
10
11
12

JS部分

// 点击事件 将按钮绑定 指定Id 的Input
uploadBtn() {
   var fileSelect = document.getElementById("uploadbtn");
   fileSelect.click();
},
//监听上传
uploadPhoto (e) {
      // 利用fileReader对象获取file
      var file = e.target.files[0];
      if(file) {
          var filesize = file.size;
          var filename = file.name;
          // 格式判断
          if (!/image\/\w+/.test(file.type)){
              this.$message.error('请上传以jpg、jpeg、png等结尾的图片文件');
              return false
          }
          // 图片大小限制 2,621,440 2M
          if (filesize > 2101440) {
              // 图片大于2MB
              this.$message.error('图片大于2MB');
              return false
          }
          var reader = new FileReader();
          reader.readAsDataURL(file);
          let that = this;
          reader.onload = (e) => {
              // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
              var imgcode = e.target.result;
              this.formInline = imgcode
          }
           // 获取本地图片地址
           // const _URL = window.URL || window.webkitURl;
           // this.imgUrl = _URL.createObjectURL(file);
      }

 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#Vue

上次更新: 2024/01/30, 00:35:17

← Vue 中的鼠标事件汇总 vue 强制刷新组件→