el-upload 组件上传图片多张 转换为base64

根据后台的需求，需要把图片处理为base64传给他，直接上代码。

图片显示正常

			<el-upload
              ref="upload1"
              action=""
              list-type="picture-card"
              multiple
              :http-request="beforeAvatarUpload"
              :limit="limit"
              :on-exceed="onExceed"
              :on-remove="onRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>


// 自定义上传方法 处理图片转化为base64
beforeAvatarUpload(file){
	const self = this;
	let reader = new FileReader();
	reader.readAsDataURL(file.file);
	reader.onload = function (e) {
		let img_base64 = e.target.result.split(",")[1];
		// 自定义数组对象，传给后台的数据
		self.imgBase64Array.push({ base64Str: img_base64 });
	}
},
// 限制提示
onExceed() {
	this.$message({
        message: "最多上传6张图片",
        type: "warning",
    });
},
onRemove(file, fileList) {},

// 提交代码
onSubmit(){
			// 判断  1无照片到有照片  2  有照片 但未新增  页面进行删除  3  在原有基础上进行新增照片（也包括原有基础删除但未删除全部，再新增）
			var that=this
            if (this.imgBase64Array.length > 0 && this.form.imgs.length == 0) {
              this.form.imgs = this.imgBase64Array;
              console.log("1无照片到有照片", this.form.imgs);
            } else if (
              this.imgBase64Array.length == 0 &&
              this.form.imgs.length > 0
            ) {
              this.form.imgs = this.form.imgs;
              console.log("2  有照片 但未新增  页面进行删除", this.form.imgs);
            } else if (
              this.imgBase64Array.length > 0 &&
              this.form.imgs.length > 0
            ) {
              this.form.imgs = [...this.imgBase64Array, ...this.form.imgs];
              console.log("3  在原有基础上进行新增照片", this.form.imgs);
            }else if (
              this.imgBase64Array.length == 0 &&
              this.form.imgs.length == 0
            ) {
              this.form.imgs = [];
              console.log("4  在原有基础上进行删除照片 未新增", this.form.imgs);
            }

            // console.log(that.form.imgs)
            var res = await geSchoolUpdateDetail(that.form);
            console.log(res);
            if (res.flag === 1) {
              that.$message.success("修改成功");
             // 清空图片
              this.$refs.upload1.clearFiles();
            }
},

图片显示如上，在线地址显示有点问题找后台重新对啦（这个大家就不要太在意）

上传成功以后后台返回url页面显示代码如下：

<div class="imgs" v-if="form.imgs && form.imgs.length > 0">
	<div v-for="(img, index) in form.imgs" :key="index">
    	<img :src="img.url" alt="" />
        <el-button class="delbutton" type="danger" size="small" @click="deleteImg(img.id)">删 除</el-button>
    </div>
</div>

// 删除图片
deleteImg(id) {
	var index;
    var arr = this.form.imgs;
    arr.map((item, i) => {
        if (item.id == id) {
          index = i;
          arr.splice(index, 1);
        }
   	});
    this.form.imgs = arr;
},