Vue上传图片到oss

参考：九宫格（图片上传）

           实现oss签名直传

            自定义图标

最终样式：

1.html代码

       

          @change="fileChange($event)"

          type="file"

          id="upload_file"

          multiple

          style="display: none"

        >

       

请上传图片(最多3张)

       

         

           

•              

                 

                    class="del"

                    src="../../assets/close-circle.png" //删除的图标路径

                    @click.stop="delImg(index)"

                    v-if="payEvidence==''"

                  >

                 

               

             

           

•              

                   //相机的图标

                 

  添加图片

               

             

         

       

     

     

       

          class="interval-normal-b"

          @click="submit"

          size="large"

          v-if="payEvidence==''"

        >确认提交

     

   

2.style样式

//按钮
.checked {

  font-size: 80px;

  color: #38bb14;

}

.van-button--large {

  height: 40px;

  line-height: 40px;

  margin-top: 30px;

}

.van-button--default {

  color: #ffff;

  background-color: #4bd126;

}

//图片上传

.app-bg > img {

  width: 100%;

  height: 100%;

  -webkit-transform: scale(1.03);

  -moz-transform: scale(1.03);

  -ms-transform: scale(1.03);

  -o-transform: scale(1.03);

  transform: scale(1.03);

}

.add-img {

  width: 100%;

  padding-top: 8px;

}

.add-img p {

  color: #999;

}

.add {

  display: inline-block;

  margin-bottom: 20px;

  text-align: center !important;

}

.add-image p {

  text-align: center !important;

}

.add-image {

  border: 1px dashed rgba(0, 0, 0, 0.2);

}

.add-image .icon-camera {

  margin-top: 25px;

  font-size: 30px;

}

.mui-btn-block {

  border: 0;

  border-radius: 0;

  background-color: #87582e;

  color: #fff;

  margin-bottom: 0;

  bottom: 0;

}

.mui-buttom {

  position: fixed;

  width: 100%;

  bottom: 0;

  z-index: 999;

}

/*九宫格*/

.img-list {

  overflow: hidden;

  padding: 10px 12px;

  padding-top: 0;

}

.img-list > li {

  float: left;

  width: 32%;

  text-align: center;

  padding-top: 31%;

  margin-left: 1%;

  margin-top: 1%;

  margin-bottom: 20px;

  position: relative;

}

.img-list > li > div {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

}

.img-list > li > div .app-bg {

  width: 100%;

  height: 100%;

}

.mui-fullscreen {

  z-index: 9999;

}

.del {

  position: absolute;

  width: 18px;

  top: 0;

  right: 0;

  z-index: 999;

}

3.script代码