⭐️个人博客：，更多分享，欢迎浏览！⭐️
如下图，需求要实现点击一个按钮，可以让表单的内容和图片一起上传，只请求后台一次！
思路：
1.让图片formData放在表单formData中一起上传，实现不了，目前前台获取不到图片的本地地址；
2.让图片的 vm.$refs.upload.submit() 放在post上传表单的函数下上传，这样会请求后台两次，并速度也很慢；
3.那就让表单formData放在图片formData中，随着图片一起上传，这个实现了，具体代码如下：
<style>input[type="file"] {display: none;}.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}</style><div class="upload-image"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name" style="width: 300px"></el-input></el-form-item><el-form-item label="上传图片" ref="uploadElement" prop="imageUrl"><el-input v-model="ruleForm.imageUrl" v-if="false"></el-input><el-uploadclass="avatar-uploader"ref="upload":show-file-list="false"action="/index/upload":before-upload="beforeUpload":on-change="handleChange":auto-upload="false":data="ruleForm"><img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div><script>var uploadImageVue = new Vue({el: '.upload-image',data: {ruleForm: {name: '',imageUrl: '',},rules: {name: [{required: true, message: '请输入活动名称', trigger: 'blur'},],imageUrl: [{required: true, message: '请上传图片', trigger: 'blur'},],}},methods: {submitForm(formName) {let vm = this;this.$refs[formName].validate((valid) => {if (valid) {vm.$refs.upload.submit();} else {return false;}});},resetForm(formName) {this.$refs[formName].resetFields();this.ruleForm.imageUrl = '';},handleChange (file, fileList) {this.ruleForm.imageUrl = URL.createObjectURL(file.raw);},beforeUpload(file) {return true;},}})</script>
中间实现了很多小技巧，比如：
1.预览图片；
2.利用input实现图片上传与否的验证。
3.样式等；
ps：更详细的讲解，欢迎浏览个人网站：曹鸿源个人站点 | | 一个爱生活的程序员
欢迎指导，有啥问题下面留言。
千而的大狮子~
