h5上传图片api(以vue开发为例)

效果图如下:(上传前上传后)

h5上传图片api(以vue开发为例)_第1张图片      h5上传图片api(以vue开发为例)_第2张图片

{{text}}

.up-box {
  @include wh(1rem, 1rem);
  margin: 0.15rem 0 0 0.175rem;
  font-size: 0.1rem;

  .upimg {
    @include wh(0.9rem, 0.9rem);
    border: 1px dotted #ccc;
    margin-bottom: 0.05rem;
    overflow: hidden;
     position: relative;
      img{
       @include wh(0.9rem, 0.9rem);
       position: absolute;
       display: block;
       top:0;
    }
    input {
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 10000;
    }
   
  }
}

 

你可能感兴趣的:(vue上传图片,js,vue)