关于vue elementUI 上传照片

最新推荐文章于 2024-06-20 19:31:07 发布

耕耘北上

最新推荐文章于 2024-06-20 19:31:07 发布

阅读量157

点赞数

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

本文链接：https://blog.csdn.net/qq_43339903/article/details/113926656

版权

vue 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

elementUI

1 篇文章 0 订阅

订阅专栏

这段代码展示了如何利用Element UI库创建一个图片上传组件，支持单图上传、图片预览、成功回调处理、图片移除等功能。在用户选择图片后，会触发on-success回调，将图片URL绑定到对话框中显示预览，同时提供了on-remove回调用于移除图片。

摘要由CSDN通过智能技术生成

上代码

<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>

export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false
        };
    },
    methods: {
        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);
        }
    }
};