elmentui upload组件+dialog上传图片

首先，你需要在你的项目中安装 ElementUI。

安装命令如下：

npm i element-ui -S

然后，在你的代码中引入 ElementUI 的 Upload 和 Dialog 组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="yourUploadUrl"
      :on-success="handleSuccess"
      :show-file-list="false">
      <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
    </el-upload>
    <el-dialog
      title="上传图片"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <img :src="imageUrl" alt="" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      imageUrl: '',
      yourUploadUrl: 'your-upload-api-url'
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 文件上传成功后的回调函数
      this.imageUrl = response.url;
      this.dialogVisible = true;
    },
    handleClose(done) {
      // 关闭 dialog 时的回调函数
      this.imageUrl = '';
      done();
    }
  }
}
</script>

以上代码中，我们使用了 ElementUI 的 Upload 组件来实现文件上传功能，并在上传成功后打开一个 Dialog 组件来显示上传的图片。通过 `:show-file-list="false"` 属性来隐藏上传列表，使用 `:on-success` 属性来设置上传成功后的回调函数。

在 `handleSuccess` 方法中，我们将服务器返回的图片地址赋值给 `imageUrl` 变量，并将 `dialogVisible` 设置为 `true`，以打开 Dialog 组件。在 Dialog 组件中，我们使用 `img` 标签来显示图片，`before-close` 属性用于设置 Dialog 关闭前的回调函数。

注意，在实际使用中，你需要将 `yourUploadUrl` 替换成你自己的上传接口地址。另外，你也需要根据你的实际需求对代码进行修改和优化。