图片上传(Base64)

图片上传(Base64)

HTML

<label for="pic_upload" class="file-update-title">
    标题<span>添加<strong>+<strong></span>
    // 点击触发文件上传 改变触发图片更新
    <input @change="uploadPic($event)" type='file' id='pic_upload' name="ensure_file"/>
</label>

<div class="parentFileBox">
    <ul class="fileBoxUl">
        // 根据图片数组遍历
        <li v-for="(item, index) in img_arr">
            <label for="true_pic1">
                <div class="viewThumb">
                    <img :src="item" alt="第一张"/>
                </div>
                // 点击取消时根据下标删除对应的图片
                <div class="diyCancel" @click="removePic(index)"></div>
                <div class="diymodel"></div>
            </label>
        </li>
    </ul>

</div>

JS

var app = new Vue({
  el: '#app',
  data: {

    // 默认图片数组
    img_arr: []
  },
  methods: {

      // 更新图片
      uploadPic: function (e, sign) {

          // 获取从input元素返回的FileList对象
          var file = e.target.files[0];
          var self = this;

          // 接受 jpeg, jpg, png 类型的图片
          if (!/\/(?:jpeg|jpg|png|gif|bmp)/i.test(file.type)) return;

          // 使用FileReader对象异步读取文件
          var fr = new FileReader()

          // 读取制定的File对象，操作完成触发loadend事件
          // result属性将包含一个data:URL格式的字符串
          fr.readAsDataURL(file)

          // 读取时触发load事件
          fr.onload = function (e) {
            var result = e.target.result;

            // 存储base64到数组
            self.img_arr.push(result)
          }
      },
      // 删除图片方法
      removePic(index) {
          this.img_arr.splice(index, 1);
      }
  }
})