使用ElementUI中el-upload上传文件转base64格式

<el-upload class="upload-demo" ref="upload" action="" :on-change="httpRequest" :on-remove="httpRequest" :file-list="fileList" :auto-upload="false">
	<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>

    data() {
		return {
			fileList: [],
			upLoadFile: []
		}
	},
	methods: {
		async httpRequest(file, fileList) {
			this.upLoadFile = []
			for (let i in fileList) {
				this.upLoadFile[i] = await this.getBase64(fileList[i].raw)
			}
			console.log('上传文件列表', this.upLoadFile)
		},
		// 转base64码
		getBase64(file) {
			return new Promise((resolve, reject) => {
				const reader = new FileReader()
				let fileResult = ''
				reader.readAsDataURL(file)
				// 开始转
				reader.onload = () => {
					fileResult = reader.result
				}
				// 转 失败
				reader.onerror = error => {
					reject(error)
				}
				// 转 结束
				reader.onloadend = () => {
					resolve(fileResult)
				}
			})
		},

			<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();
            }
},

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