关于在Vue 2 中 Element UI 文件上传组件的使用


<el-button type="success" @click="filedialogVisible = true" icon="el-icon-upload2">上传文件
</el-button>

 <!-- 上传文件模态框 Start -->
        <el-dialog title="上传行政文件" :visible.sync="filedialogVisible" width="600px" :before-close="filehandClose">
            <el-upload ref="upload" style="text-align: center;" action="url" drag :http-request="uploadFile" multiple
                accept=".pdf" :limit="1" :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只允许上传PDF文件,大小不超过100MB</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFile">上传</el-button>
                <el-button @click="filedialogVisible=false">取 消</el-button>
            </div>
        </el-dialog>
<!-- 上传文件模态框 End -->

        methods: {
         
            filehandClose() {
            //按需在data中定义
                this.filedialogVisible = false;
            },

            // 用户自定义上传文件 Start
            uploadFile(param) {
                const formData = new FormData();
                formData.append("file", param.file);
                this.$axios
                    .post("/govermentfile/upload", formData, {
                        "Content-type": "multipart/form-data",
                    })
                    .then((res) => {
                        console.log(res.data);
                        this.filedialogVisible = false;
                        this.$message({
                            showClose: true,
                            duration: 2000,
                            message: '上传成功',
                            type: 'success',
                            onClose: () => {
                                this.getFileList();
                            }
                        });

                    });
            },
            submitFile() {
                this.$refs.upload.submit();
            },
            // 用户自定义上传文件 End

        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天宇龙腾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值