上传图片 el-upload 上传文件图片上传

星空小梦

于 2023-02-02 23:05:04 发布

阅读量342

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_50885665/article/details/128858852

版权

本文介绍了如何在Vue.js项目中结合ElementUI组件el-upload实现图片上传功能。通过设置属性控制文件列表样式，并利用'on-success'监听上传成功事件，接收返回数据。同时，利用'on-preview'实现预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form-item label="上传图片" >
            <el-upload
              :action="uploadUrl()"
              list-type="picture-card"
              :on-remove="handleRemove"
              :http-request="customUpload"
              :before-upload="beforeAvatarUpload"
              :on-success="onSuccess"
              :on-preview="handlePictureCardPreview"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>