码迷,mamicode.com
首页 > Web开发 > 详细

上传图片

时间:2018-08-02 20:47:55      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:sim   ret   creat   ||   src   load   eve   class   round   

父组件

<div class="uploadFile">
  <uploadFile v-model="uploadImg" ref="loadImg" uploadImg="uploadFileImg"/>
</div>
子组件
<template>
  <div class="upload">
    <div class="content">
      <label class="lable">
        <span v-text="$lang.inputQRcode"></span>
        <input class="hide" type="file" accept="image/jpg,image/jpeg,image/png" @change="getFiles($event)">
      </label>
      <div class="img" v-if="isImg">
        <img :src="_backgroundimg" v-if="_backgroundimg">
      </div>
    </div>
  </div>
</template>
 
getFiles(event) {
  this.isImg = true;
  let reads = new FileReader();
  if (event.srcElement.files) {
    if (event.srcElement.files.length > 0) {
      let fileSize = 0;
      let files = event.srcElement.files[0];
      if (files.size) {
        fileSize = Number(files.size / 1024 / 1024).toFixed(2); //单位为MB
      }
      if (fileSize > 5) {
        console.log(“图片尺寸过大”)
      });
      return false;
      }
      // var windowURL = window.URL || window.webkitURL;
      this.src = window.URL.createObjectURL(event.srcElement.files[0]);
      this.file = files;
      this.uploaded = this.src
      console.log("文件",this.src)
      }
    }
},
 
 
 

上传图片

标签:sim   ret   creat   ||   src   load   eve   class   round   

原文地址:https://www.cnblogs.com/lingshan168/p/9409302.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!