vue+elementui实现图片上传回显，不能预览来砍我

找了半天找到一篇可以预览的代码：

vue + element-UI 实现图片嵌在表单里，图片和表单一起上传_hongyuancao的博客-CSDN博客_vue和element实现图片上传

如下图，需求要实现点击一个按钮，可以让表单的内容和图片一起上传，只请求后台一次！

思路：

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-upload
                        class="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：更详细的讲解，欢迎浏览个人网站：https://caohongyuan.com/

欢迎指导，有啥问题下面留言。

千而的大狮子~