element ui + ajax上传文件

HTML

复制代码
 <el-upload drag
            :auto-upload="false"
            :file-list="fileList"
            :before-remove="beforeRemove"
            :on-change="handleChange"
            action="#"
            class="upload-demo"
            multiple>
           <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
复制代码

JS

复制代码
      beforeRemove(file, fileList) {
                    return this.$confirm(`确定移除 ${file.name}?`);
                },
                handleChange(file, fileList) {
                    this.fileList = fileList;
                },
                onSubmit(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            const _this = this;
                            if (_this.fileList.length == 0) {
                                _this.$message.error("请上传文件!");
                                return;
                            }
                            var formData = new FormData();
                            for (let i = 0; i < _this.fileList.length ; i++) {
                                formData.append('file', _this.fileList[i].raw);
                            }
                           
                            $.ajax({
                                url: '后端url',
                                type: 'post',
                                contentType: false,
                                processData: false,
                                data: formData,
                                dataType:"json",
                                success: function (result) {
                                    if (result.Data == 1) {
                                        _this.$refs[formName].resetFields();
                                        _this.fileList = [];
                                        _this.$message({
                                            showClose: true,
                                            message: '已提交,工作人员会在1-5个工作日为您解答,请耐心等待。',
                                            type: 'success'
                                        });
                                    }
                                    else {
                                        _this.$message.error(result.Message);
                                    }
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                }
复制代码

效果截图

 

posted @   微风吹过~  阅读(161)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示