上代码

<el-upload

                    action="http://clound_clothing.wenkangkeji.com/mlcc/user/interface/uploadImage"

                    list-type="picture-card"

                    :limit= "1"

                    :on-success="handleAvatarSuccess"

                    :on-preview="handlePictureCardPreview"

                    :on-remove="handleRemove"

                >

                    <el-dialog :visible.sync="dialogVisible">

                        <img width="100%" :src="dialogImageUrl" alt="" />

                    </el-dialog>

                    <i class="el-icon-plus"></i>

                </el-upload>

对应的变量

dialogImageUrl: '',

            dialogVisible: false,

对应的函数处理

handleRemove(file, fileList) {

            console.log(file, fileList);

        },

        handlePictureCardPreview(file) {

            console.log(file);

            this.dialogImageUrl = file.url;

            this.dialogVisible = true;

        },

        handleAvatarSuccess(res, file) {

            console.log(res)

            this.imageUrl = URL.createObjectURL(file.raw);

            this.$store.commit('zidingyiImg', res.data);

        },