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

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

      

<div class="up-box">
        <div class="upimg">
          <img :src="image" alt="">
          <img src="../../../../assets/upimg.png" alt="" v-if="show">
          <input type="file"  accept="image/jpeg,image/png,image/jpg,image/gif"  multiple="" @change='getimg($event)'>     
        </div>
        <p>{{text}}</p>
</div>

<script>
import { mapMutations } from "vuex";
export default {
  name: "invitation",
  data() {
    return {
      show:true,//上传的+号是否显示
      text:'请上传微信二维码',//二维码文字
      image: "",

    };
  },
  components: {},

  filters: {
    phoneFilters: function(value) {
      return value.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3");
    }
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(["TITLE"]),
   
    getimg(e) {
      let that = this;
      var files = e.target.files[0];
      console.log(files);
      if (!e || !window.FileReader) return; // 看支持不支持FileReader

      if(files.size>100*1024){
        alert('图片不能超过200k');
        return;
      }

      let reader = new FileReader();
      reader.readAsDataURL(files);  // 读取文件
      reader.onloadend = function() {
        that.show=false;
        that.image = this.result;
        that.text='更换微信二维码'     
      };
    },
   
  },
  computed: {}
};
</script>

.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;
    }
   
  }
}