el-upload上传文件携带额外参数

这篇具有很好参考价值的文章主要介绍了el-upload上传文件携带额外参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在进行文件上传时,需要传递其他参数,比如下图中需要实现携带下拉框的参数

el-upload上传文件携带额外参数

前端实现:将下拉框中的参数 传递到:data中 

:data="{'script_model':script_model}"  

<el-dialog title="上传脚本" :visible.sync="up_script_visible" style="line-height:18px;width: 100%;">
      <el-select v-model="script_model" style="float: left">
        <el-option label="other脚本(低性能)" value="other"></el-option>
        <el-option label="python脚本(中性能)" value="python"></el-option>
        <el-option label="go脚本(高性能)" value="go"></el-option>
      </el-select>
      <br><br><br>
      <el-upload
          :data="{'script_model':script_model}"  
          style="float: left"
          :action="get_action()"
          :limit="1"
          name="script_file"
    >
        <el-button size="mini" type="primary">上传脚本</el-button>
      </el-upload>
      <br><br><br><br>
    </el-dialog>


  methods:{
    get_action(){
      return process.env.VUE_APP_BASE_URL+'/upload_script_file/'
    },
}

 后端实现:

从post请求中获取携带的参数:

 script_model = request.POST.get('script_model')文章来源地址https://www.toymoban.com/news/detail-510799.html

# 上传文件
def upload_script_file(request):
    script_model = request.POST.get('script_model')
    myFile = request.FILES.get('script_file')
    file_name = str(myFile)
    fp = open('scripts/' + script_model + '/' + file_name, 'wb+')
    for i in myFile.chunks():
        fp.write(i)
    fp.close()
    return HttpResponse('')

到了这里,关于el-upload上传文件携带额外参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-upload上传文件类型大小限制+手动上传+通过后端给的接口带参数

      本地上传文件类型只能是 xml 和 a2l 的 做多上传个数为2个 可以多选上传 每种格式最多上传一个文件 上传为手动上传到服务器 上传错误有相应的提示   首先上传为手动上传那么文件类型我是打算在选取文件到前端页面的过程中我就处理文件 或者也    可以在上传服务器的

    2024年02月08日
    浏览(111)
  • 使用element-ui的el-upload进行excel文件上传与下载

    需求:前端上传文件后,后端接受文件进行处理后直接返回处理后的文件,前端直接再将文件下载下来。 通常我们都是直接使用el-upload的action属性来直接完成文件上传的操作,如果要进行后续文件的直接下载,可以在on-success中用代码进行操作,若存在401权限问题也可以直接

    2024年02月11日
    浏览(45)
  • elementui el-upload 上传文件

    在使用element中的el-upload上传文件或者图片时,需要先把el-upload的自动上传改为手动上传:auto-upload=“false”然后el-upload内部会调用this.$refs.upload.submit();方法,从而实现多个文件上传。 提示:以下是本篇文章正文内容,下面案例可供参考 代码如下(示例): 需要注意的是 acce

    2024年02月06日
    浏览(54)
  • el-upload实现上传文件夹

    背景:如图一所示,最下面有一个黄色上传文件按钮,为手动上传而且上传区域有上传文件和上传文件夹的区分 所以需要在点击了上传文件夹做特殊处理使得el-upload可以上传文件夹 01.在拖拽上传的区域绑定一个点击事件 handlePreview ,(注意不要直接绑定在el-upload区域,会被触

    2024年02月07日
    浏览(59)
  • el-upload 文件上传组件的使用

    element-ui官网 element ui=upload上传组件 Upload 上传文件这个功能是我们在企业实际开发当中使用频率是非常高的这样一个文件上传的功能,,element ui组件组也给我们提供了上传的组件。所有我们一定要熟悉掌握它 使用之前先进行一下element ui的安装和配置 打开终端=输入npm i elem

    2024年02月11日
    浏览(75)
  • vue 使用 el-upload 上传文件(自动上传/手动上传)

    vue 使用 el-upload 上传文件(自动上传/手动上传) 上传 上传

    2024年02月13日
    浏览(60)
  • el-upload自定义上传文件显示进度条

    el-upload自定义上传文件时需要显示进度条,但使用 http-request 会覆盖默认的上传行为, on-progress 也就不生效了,所以可以 自定义上传的实现 。 按钮 数据 事件 导入接口 接口方法 uploadEvent ——在封装的axios请求方法的headers里面加入即可(关键)

    2024年02月15日
    浏览(45)
  • el-upload实现上传文件并展示进度条

    el-upload在实现文件上传时无法触发on-progress钩子,即使调用后端接口并成功的情况下都无法触发,可以通过如下配置来解决: 随后将config添加至调用后端接口,即可成功获取进度~ html: JS部分

    2024年02月04日
    浏览(38)
  • 使用el-upload组件实现递归多文件上传

    一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。 · 二、 问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击上传按钮,选择了多个文件后点击确定,会同时调用

    2023年04月08日
    浏览(40)
  • el-upload批量手动上传,并用form表单校验上传文件

    手动上传设置:auto-upload=\\\"false\\\"

    2024年02月14日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包