当前位置: 首页 > news >正文

element-ui中的上传组件el-upload非自动上传监听不到success

当设置了:auto-upload="false"

监听不到success回调

要用自定义请求去监听

:http-request="requestUploadFile"

//设置 auto-upload为false,要自定义请求http-request
//:auto-upload="false"
//:http-request="requestUploadFile"<el-uploadref="upload"class="upload-demo"v-loading="loading"action="#":headers="Token":limit="1":multiple='true':auto-upload="false":http-request="requestUploadFile":on-change="handleChange":accept="accept":file-list="fileList":on-preview="handlePictureCardPreview":show-file-list="true"><el-button type="success">点击上传</el-button></el-upload>
//自定义请求方法
async requestUploadFile(options) {const { action, data, file, filename, headers, onError, onProgress, onSuccess } = options;// 创建 FormDataconst formData = new FormData();formData.append(filename, file);// 添加额外数据if (data) {Object.keys(data).forEach(key => {formData.append(key, data[key]);});}// 使用 axios 或其他 HTTP 库上传axios.post(this.BASE_API+this.url, formData, {headers: {...headers,'Content-Type': 'multipart/form-data'},}).then(response => {// console.log('上传成功---',response)if(response.data.code == 0){this.$emit('queryHandle')this.$message({message: response.data.msg,type: "success",});}else{this.$message({message: response.data.msg,type: "error",});}}).catch(error => {this.$message({message: error,type: "error",});});},//发送按钮submitUpload() {this.$refs.upload.submit();},

http://www.xdnf.cn/news/70633.html

相关文章:

  • 每天一道面试题@第一天
  • 12.QT-Combo Box|Spin Box|模拟点餐|从文件中加载选项|调整点餐份数(C++)
  • 【数据结构入门训练DAY-19】总结数据结构中的栈
  • 柔和的风光人像静物摄影Lr调色教程,手机滤镜PS+Lightroom预设下载!
  • LX2-编译及下载程序
  • shardingsphere启动报mode错误
  • 软考中级数据库系统工程师学习资料分享
  • 控制系统的结构和关键指标
  • 02_Flask是什么?
  • 【大模型】Browser-Use AI驱动的浏览器自动化工具
  • ORB-SLAM_地图点优化_固定位姿_g2o定义_雅可比矩阵推导
  • Vscode开发STM32标准库
  • 实践项目开发-hbmV4V20250407-项目架构设计
  • 多线程累加探索思考
  • 在统信UOS 1060上实现自动关机
  • Java并发:资源共享
  • 在CSDN的1095天(创作纪念日)
  • ECMAScript
  • 网络结构及安全科普
  • 【MySQL】表的约束(主键、唯一键、外键等约束类型详解)、表的设计
  • 前端工程化:构建高质量 Web 项目的现代方法论
  • Keil5没有stm32的芯片库
  • 反转字符串
  • 【CUDA 】第5章 共享内存和常量内存——5.2 共享内存的数据分布(2)
  • Nacos 客户端 SDK 的核心功能是什么?是如何与服务端通信的?
  • 【集群IP管理分配技术_DHCP】二、DHCP核心功能与技术实现
  • Openwrt 编译树莓派4B固件
  • 【C++】入门基础知识(下)
  • JAVA实战开源项目:医院资源管理系统 (Vue+SpringBoot) 附源码
  • leetcode day 35 01背包问题 416+1049