vue +elementui 项目中表单提交同时上传图片，转为base64格式传给后端

本文主要是介绍vue +elementui 项目中表单提交同时上传图片，转为base64格式传给后端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.新增应用时时一个form 表单，其中一个是用户上传应用图标。
在这里插入图片描述
2.要求传给后端时以base64格式，需要前端转换。在上传时的chaneg事件里转，完整代码如下

<template><j-page><div slot="content"><!-- <el-button type="text" icon="el-icon-back">返回</el-button> --><el-button :loading="btnLoading" type="primary" @click="saveInfo">保存</el-button></div><el-card><el-form ref="appForm" :model="appForm" :rules="appRules"><el-form-item label="应用名称" prop="name"><el-input v-model="appForm.name" placeholder="请输入应用名称" /></el-form-item><el-form-item label="应用标识" prop="key"><el-input v-model="appForm.key" placeholder="请输入应用标识" /></el-form-item><el-form-item label="应用描述" prop="description"><el-input v-model="appForm.description" placeholder="请输入应用描述" style="width:100%" /></el-form-item><el-form-item label="应用类型" prop="type"><el-select v-model="appForm.type" placeholder="请选择应用类型" style="width:100%"><el-option label="默认应用" value="0" /><el-option label="接入应用" value="1" /></el-select></el-form-item><el-form-item label="应用状态" prop="state"><el-select v-model="appForm.state" placeholder="请选择应用状态" style="width:100%"><el-option label="可用" value="0" /><el-option label="不可用" value="1" /></el-select></el-form-item><el-form-item label="是否启动" prop="status"><el-radio-group v-model="appForm.status"><el-radio label="0">是</el-radio><el-radio label="1">否</el-radio></el-radio-group></el-form-item><el-form-item label="分组" prop="group"><el-select v-model="appForm.group" placeholder="请选择分组" style="width:100%"><el-optionv-for="item in groupList":key="item.id":label="item.name":value="item.id"/></el-select></el-form-item><el-form-item label="失效日期" prop="invalidDate"><el-date-picker v-model="appForm.invalidDate" type="datetime" placeholder="选择日期" /></el-form-item><el-form-item label="应用访问根路径" prop="url"><el-input v-model="appForm.url" placeholder="请输入应用访问根路径" /></el-form-item><el-form-item label="应用访首页路由" prop="homeUrl"><el-input v-model="appForm.homeUrl" placeholder="请输入应用访首页路由" /></el-form-item><el-form-item label="关键字" prop="keyWords"><el-input v-model="appForm.keyWords" placeholder="请输入应用关键字" /></el-form-item><el-form-item label="应用图标" prop="image"><el-uploadclass="upload-img":style="{backgroundImage:'url(' + appForm.image + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"action::limit="1":show-file-list="false":on-change="handleChange":before-upload="beforeUpload"accept="image/png, image/gif, image/jpg, image/jpeg"><i v-show="!appForm.image" class="el-icon-upload avatar-uploader-icon" /><div v-show="!appForm.image" slot="tip" class="el-upload__text upload__tip">上传照片</div></el-upload></el-form-item></el-form></el-card></j-page>
</template><script>
import { apiBaseAppAdd, apiBaseAppUpdate } from "@/api/application/application";
import moment from "moment";import { apiBaseGetDic } from "@/api/dictionary/dictionary";export default {props: {visible: {type: Boolean,default: true,},ip: {type: String,default: null,},dicTitle: {default: undefined,type: String,},data: {type: Object,default: () => undefined,},},data() {return {btnLoading: false,appForm: {image: undefined,type: "0",state: "0",status: "0",},appRules: {name: [{ required: true, message: "请输入名称", trigger: "blur" }],key: [{ required: true, message: "请输入key", trigger: "blur" }],image: [{ required: true, message: "请选择图片", trigger: "blur" }],},groupList: [],};},mounted() {this.getDic();},methods: {onClose() {this.$emit("update:visible", false);// console.log(this.$refs.appForm);// if (!this.data) {this.$refs.appForm.resetFields();// }// if (this.data) this.appForm = this.data;// this.appForm.imageUrl = "";},async getDic() {const { data, success, message } = await apiBaseGetDic();if (!success) {this.$message.warning(message);return;}this.groupList = data;},async saveInfo() {try {await this.$refs.appForm.validate();} catch (error) {return;}this.btnLoading = true;const { success, message } = await apiBaseAppUpdate(this.appForm);if (!success) {this.$message.warning(message);return;}this.btnLoading = false;this.$message.success(message);this.$router.go(-1);},handleChange(file, fileList) {const isLt2M = file.size / 1024 / 1024 < 2;if (isLt2M) {// uploadImgToBase64()返回一个Promise对象，通过.then()获取其数据。其中data.result是图片转成的base64值this.uploadImgToBase64(file.raw).then((data) => {this.appForm.image = data.result;});} else {this.$message.error("上传图片大小不能超过 2MB!");}},uploadImgToBase64(file) {// 核心方法，将图片转成base64字符串形式return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function () {// 图片转base64完成后返回reader对象resolve(reader);};reader.onerror = reject;});},beforeUpload(file) {return false;},},
};
</script><style lang="scss" scoped>
input[type="file"] {display: none;
}.avatar-uploader /deep/ .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader /deep/ .el-upload:hover {border-color: #409eff;
}
.avatar-uploader-icon {font-size: 36px;color: #8c939d;width: 120px;height: 120px;line-height: 120px;text-align: center;
}
.avatar {width: 120px;height: 120px;display: block;
}
.add-keyperson-dialog .upload-img:hover {border-color: #409eff;color: #409eff;
}
.el-dialog__body {height: 400px;overflow-y: auto;overflow-x: hidden;
}/deep/ .el-form {width: 50%;margin: auto;
}
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {width: 100%;
}
</style>