使用: 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>