vue系列：Vue+elementUI ＜el-upload＞和＜el-form＞表单一起提交（二）

最新推荐文章于 2024-07-09 09:24:08 发布

EvenBoy

最新推荐文章于 2024-07-09 09:24:08 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_42169734/article/details/119928340

版权

vue.js 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-form ref="form" :model="form" :rules="SearchFormRules" label-width="80px" class="search_form">

            <el-form-item label="姓名" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-upload ref="upload" action="#" :on-preview="handlePreview" :on-remove="handleRemove"
                :on-success="onSuccess" :on-change="onChange" :http-request="uploadData" :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">
                    上传的文件不能超过100MB
                </div>
            </el-upload>
            <el-button type="primary" @click="createData">提交</el-button>
            <el-button type="info" @click="resetSearchForm">重置</el-button>
        </el-form>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                //文件名
                fileName: "",
                //文件上传成功状态
                fileUploadStatus: "",
                //添加表单的数据对象
                form: {
                    userName: "",
                    age: "",
                },

                //form表单失去焦点校验
                SearchFormRules: {
                    userName: [
                        { required: true, message: "请输入姓名", trigger: "blur" },
                    ],
                    age: [
                        { required: true, message: "请输入年龄", trigger: "blur" },
                    ],
                },
            }
        },
        methods: {
            createData() {
                
                var fileName = this.fileName;
                if (fileName == "") {
                    this.$message({
                        message: "请选择上传文件！",
                        type: "error",
                    });
                    return;
                }

                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        //这里会调用:http-request=uploadData的这个方法
                        this.$refs.upload.submit();
                        //获取form表单的参数
                        let formData = new FormData()
                        for (let key in this.form) {
                            formData.append(key, this.form[key])
                            console.log(key+"----"+formData.get(key));
                        }
                        console.log("formData:"+formData);

                        this.$http({
                            method: "post",
                            url: "insertUserInterface",
                            data: formData,

                        }).then((resp) => {
                            console.log(resp);
                            if (resp.code == 200) {
                                this.$message({
                                    message: "提交成功，请等待管理员审核！",
                                    type: "success",
                                });
                                //提交成功重置form表单
                                this.$refs.form.resetFields();
                                //browse
                                // alert("提交成功，请等待审核！");
                                // this.$router.push({ path: "/browse" });
                            } else {
                                this.$message({
                                    message: "系统出错了，请联系管理员！",
                                    type: "error",
                                });
                                // this.$router.push({ path: "submit" });
                            }
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },


            //文件上传方法
            uploadData(params) {
                let fd = new FormData();
                fd.append("file", params.file); //传文件
                this.$http({
                    method: "post",
                    url: "upload",
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                    params: fd,
                }).then((resp) => {
                    console.log(resp);
                    if (resp.code == 200) {

                    } else {
                        this.$message({
                            message: "系统出错了，请联系管理员！",
                            type: "error",
                        });
                        // this.$router.push({ path: "submit" });
                    }
                });
            },

            //form表单重置按钮，重置登录表单
            resetSearchForm() {
                // console.log(this);
                this.$refs.form.resetFields();
            },


            //文件上传成功时的钩子
            onSuccess(response, file, fileList) {
                debugger;
                console.log(response);
                console.log(file);
                console.log(fileList);
                if (response.code == 200) {
                    alert("文件上传成功！");
                    this.fileUploadStatus = "success";
                } else {
                    this.fileUploadStatus = "error";
                }
            },

            //文件列表移除文件时的钩子
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },

            //点击文件列表中已上传的文件时的钩子
            handlePreview(file) {
                console.log(file);
            },

            //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
            onChange(file) {
                console.log(file.name);
                this.fileName = file.name;
            },
        }
    })
</script>

</html>

关注this.$http怎么封装可以参考一下这位博主

https://blog.csdn.net/p445098355/article/details/115966283