标签：const 前端 height width vw 上传 image 图片

使用: vue2, vant2

功能点：

qs1: 前端上传图片并展示
an1: 上传file格式图片转为base64格式
qs2: 要将上传的图片在宽高固定的窗口里显示完整
an2: 把获取的base64的图片链接，赋值到image的src上，然后获取到图片的宽高比例；再与窗口宽高比例对比，选择以高占满还是以宽占满。

 #### 具体实现：
 ....结构：
   <div class="upload">
    <div class="img-box">
      <div class="image-no" @click.stop="openFile" v-if="!image.url">
        <div class="tip">
          <img src="./../../assets/myopus/icon-upload.png" alt="" />
          <div class="text">请上传您的照片</div>
        </div>
      </div>
      <div ref="window" class="image-yes" @click.stop="openFile" v-else>
        <div class="img">
          <img :style="isWidth? 'width:89.333333vw' : 'height: 56vw'" :src="image.url" alt="" />
        </div>
      </div>
      <input
        type="file"
        ref="selectFileImg"
        accept="image/*"
        v-show="false"
        @change="selectFileImg"
      />
    </div>
    <div class="des-box">
      <van-field
        class="des"
        v-model="des"
        rows="3"
        autosize
        type="textarea"
        maxlength="20"
        placeholder="请简要描述您的照片，体现环保美~"
        show-word-limit
      />
    </div>
    <div class="submit">
      <button @click.stop="submit()">确认上传</button>
    </div>
  </div>
 ....数据: 
     isWidth: true, // 上传的图片展示时，是以宽为主还是高为主
     image: {
      file: null,
      url: null,
     },
     des: '', // 照片描述文字
 ....方法：
     // 创建点击事件并出发file选择图片
    openFile() {
      const click = new window.MouseEvent("click");
      this.$refs.selectFileImg.dispatchEvent(click);
    },
    // 文件选择
    selectFileImg() {
      const input = this.$refs.selectFileImg;
      const files = input.files;
      if (files.length < 1) return;
      const image = files[0];
      const size = 20 * 1024 * 1024; // 限定大小
      if (!image.type.includes("image")) {
        this.$toast("必须上传图片");
        input.value = "";
        return;
      }
      if (image.size > size) {
        this.$toast("图片大小不能超过20M");
        input.value = "";
        return;
      }
      this.image.file = image;

      // 图片转为base64格式
      var reader = new FileReader();
      reader.readAsDataURL(image);
      reader.onload = (e) => {
        this.image.url = e.currentTarget.result
        // 新建image元素，获取宽高比，与用户上传图片的宽高比 进行比较，得出用宽还是占满
        var image = new Image();
        image.src = this.image.url
        image.onload= () => {
          // 获取上传图片宽高
          const width = image.width;
          const height = image.height;
          // console.log(width,height)
          // 获取窗口宽高比
          const window = this.$refs.window
          // console.log(window.offsetHeight, window.offsetWidth)
          const key = window.offsetWidth/window.offsetHeight
          const mykey = width/height
          if(mykey <= key) return this.isWidth = false
          this.isWidth = true
        }
      };
    },
    // 上传接口
    submit() {
      if(!this.image.url) return this.$toast('请上传您的照片')
      if(!this.des.trim()) return this.$toast('请输入照片简述')

      console.log("开始上传")
    },
....样式:
	<style lang="scss" scoped>
	.upload {
	  width: 100vw;
	  min-height: 100vh;
	
	  .img-box {
	    width: 89.333333vw;
	    height: 56vw;
	    overflow: hidden;
	    border: 1px dashed #ec851a;
	    border-radius: 3.2vw;
	    margin: 4vw auto;
	
	    .image-no {
	      width: 89.333333vw;
	      height: 56vw;
	      background: rgba(236, 133, 26, 0.04);
	      display: flex;
	      justify-content: center;
	      align-items: center;
	
	      .tip {
	
	        img {
	          display: block;
	          width: 10vw;
	          margin: 0 auto 3vw;
	        }
	
	        .text {
	          font-size: 14px;
	          color: #ec851a;
	          letter-spacing: 1px;
	        }
	      }
	    }
	
	    .image-yes {
	      width: 89.333333vw;
	      height: 56vw;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	
	      .img {
	        
	        img {
	          display: block;
	        }
	      }
	    }
	  }
	
	  .des {
	    width: 89.333333vw;
	    background-color: #fbfbfb;
	    border-radius: 3.2vw;
	    margin: 0 auto 8vw;
	
	    ::v-deep.van-field__control {
	      font-size: 14px;
	    }
	
	    ::v-deep.van-field__word-limit {
	      font-size: 14px;
	      color: #c9c9c9;
	    }
	  }
	
	  .submit {
	    text-align: center;
	
	    button {
	      width: 40vw;
	      height: 11.2vw;
	      background-color: #ec851a;
	      border: none;
	      border-radius: 5.333333vw;
	      outline: none;
	      font-size: 16px;
	      color: #fff;
	    }
	  }
	}
	</style>

标签：const,前端,height,width,vw,上传,image,图片
来源： https://blog.csdn.net/weixin_42491987/article/details/123116882

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。