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; } }); }
效果截图
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了