element 实现上传单个图片功能（上传一张图片后隐藏上传按钮功能）完整demo供参考

最新推荐文章于 2026-04-19 09:58:05 发布

原创

最新推荐文章于 2026-04-19 09:58:05 发布 · 3.4k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种使用Element UI实现的单个图片上传和预览功能，通过自定义HTTP请求处理图片上传流程，并利用对话框组件展示图片预览效果。代码详细展示了如何配置上传组件的属性和方法。

<!-- demo 上传单个图片-->
<template>
  <div>
    <h2 style="margin-bottom:10px">上传单个图片</h2>
    <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :http-request="httpRequest"
        :class="{'demo-httpRequestImg':httpRequestImg}"
        >
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisibleImg" append-to-body class="ImgClass">
        <img width="100%" :src="https://blog.csdn.net/dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dialogImageUrl: '',//预览url
      dialogVisibleImg:false,
      httpRequestImg

标签

#vue.js