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 @ 2022-10-20 17:45  微风吹过~  阅读(103)  评论(0)  编辑  收藏  举报