js手机端上传图片，带压缩图片

1.html中添加隐藏的input 

<img
      class="input-img-wrap"
      v-on:click="imgClick()"
      :src="fapiao"
      v-if="fapiao"
    />

<div class="input-img-wrap" @click="imgClick" v-else>
      <img src="../../assets/img/common/+_icon.png" alt="" />
      <span>上传图片</span>
    </div>

<input
    style="display: none;"
    type="file"
    id="uploadFile"
    accept="image/png,image/jpeg"
    v-on:change="readLocalFile()"
/>

2.压缩图片

核心代码：

1.FileReader将input中的图片本地url变为图片Base64编码。

    var localFile = document.getElementById("uploadFile").files[0];

    var reader = new FileReader();

    reader.onerror

    reader.readAsDataURL(localFile , 'UTF-8