Vue实现图片转Base64上传案例

一、前端图片转Base64

获取图片，将图片转为Base64字符串，AJAX提交到后台进行处理，前端使用了Vue基础。但是这种做法会比较复杂，后续会使用vant框架实现。

<!--上传图片-->
<div style="width: 90%;margin-left: 5%;margin-top: 30px">
        <div class="pics" v-for='(value, key) in imgs' style="text-align:center;float: left;width: 19%;">
            <div class="onepicdiv" style="float:left;width: 100%;">
                <div>
                    <img class="onepic" :id=key :src="getObjectURL(value)" style="width: 85%;" @click="showImgs(value)">
                </div>
                <div @click="delImg(key)" style="color: #999999;width: 100%;font-size: 13px;color: #999999;position: relative;top: -63px;left: 26px">
                    <van-icon name="close" color="rgb(0,0,0)"/>
                </div>
            </div>
        </div>
        <div v-if="imgLen>=5 ? false : true">
            <div class="addpicture">
                <input id="myfile" type="file" @change="addImg" ref="inputer" multiple accept="image/*"
                       style="opacity:0;width: 100%;"/>
            </div>
        </div>
        <div style="font-size: 10px;padding-top: 40px;color: #999999">&nbsp;&nbsp;{
  {imgLen}}/5</div>
    </div>
    
<!--放大图片时被放大的图片和图片列表之间的遮罩层-->
<div id="showpicmask">
    <div v-show="show" @click="back()"
         style="position: fixed;z-index: 100