首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

使用element UI 的el-upload上传图片并携带参数的用法

  • 24-03-18 01:02
  • 4433
  • 13211
blog.csdn.net

直接看代码:前端实现

<div class="upload">
  <el-upload
    class="upload-demo"
    name="upload_name"
    :data="{'user_name':user_name}"
    action="http://localhost:8000/api/deal_pest_Image"
    :show-file-list="false"
    :on-success="handleSucess"
  >
    <el-button size="small" type="primary">点击上传el-button>
  el-upload>
div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

注意data必须是object类型即键值对类型

处理成功的回调

handleSucess(response, file, fileList){
  console.log('response', response)
  if(response.code === 200){
    this.$message({
      message: '上传并处理成功',
      type: 'success'
    });
    this.init()
  }else {
    this.$message.error('出错了,请稍后重试');
  }
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

按下点击上传按钮,选择图片后即可向action=http://localhost:8000/api/deal_pest_Image这个地址上传如下图:

在这里插入图片描述

可以看出浏览器发送的是post请求,请求参数如下:

在这里插入图片描述

所以后端用post方式接收即可,Python的案例:

在这里插入图片描述

注:本文转载自blog.csdn.net的jjw_zyfx的文章"https://blog.csdn.net/jjw_zyfx/article/details/132299081"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

130
用户体验设计
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top