iview upload 上传时携带额外参数

可以直接放到组件里用， “action”改为自己的接口路径；

效果：点击看效果图

<template><Form :model="formItem" :label-width="80"><FormItem label="文件名称"><Input v-model="formItem.input"></Input></FormItem><FormItem label="文件"><Uploadref="upload":before-upload="handleUpload"action="https://jsonplaceholder.typicode.com/posts/":data="formItem"><Button icon="ios-cloud-upload-outline">选择附件</Button></Upload></FormItem><FormItem label="归属地"><Select v-model="formItem.select"><Option value="beijing">北京</Option><Option value="shanghai">上海</Option><Option value="shenzhen">深圳</Option></Select></FormItem><FormItem label="备注"><Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input></FormItem><FormItem><Button type="primary" @click="upload">Submit</Button></FormItem></Form>
</template>
<script>export default {data () {return {formItem: {input: '',select: '',textarea: ''},file: null,loadingStatus: false}},methods: {handleUpload (file) {this.file = file;this.formItem.input = file.namereturn false;},upload () {this.loadingStatus = true;setTimeout(() => {// 重点 赋值this.$set(this.$refs.upload.data,'input',this.formItem.input)this.$set(this.$refs.upload.data,'select',this.formItem.select)this.$set(this.$refs.upload.data,'textarea',this.formItem.textarea)this.$refs.upload.post(this.file)this.file = null;this.loadingStatus = false;this.$Message.success('Success')}, 1500);}}}
</script>

参考：参考原文，讲解的很详细

iview upload 上传时携带额外参数相关推荐

el-upload上传文件携带额外参数
在进行文件上传时,需要传递其他参数,比如下图中需要实现携带下拉框的参数前端实现:将下拉框中的参数传递到:data中 :data="{'script_model':script_model ...
bootstrapinput传参数_bootstrap-fileinput组件在上传时传递额外参数 Web程序 - 贪吃蛇学院-专业IT技术平台...
解决方法关键的配置参数是uploadExtraData 具体的代码如下: //获得额外参数的方法 fodderType = function() { return $("#fodderTy ...
bootstrap-fileinput组件在上传时传递额外参数
解决方法关键的配置参数是uploadExtraData 具体的代码如下: //获得额外参数的方法fodderType = function() {return $("#fodderType ...
html文件上传添加额外参数,bootstrap-fileinput组件在上传时传递额外参数
解决方法关键的配置参数是uploadExtraData 具体的代码如下: //获得额外参数的方法 fodderType = function() { return $("#fodderTy ...
element-ui upload 上传组件附带额外参数进行上传（表单形式，多个参数）
之前一直使用upload组件单个上传文件,最近遇到需要上传表单字段,表单中有多个参数下图是接口要求: 官网上传组件中提供了响应的功能实现,但是demo中未演示,不注意看文档参数的话,可能会不知道这个 ...
【Antd Design Upload】 antd Upload 上传时只有Uploading状态，无法获取返回的数据
问题:antd Upload 上传时只触发Uploading状态,无法获取服务器返回的response,根据控制台的结果发现只有一种Uploading,上传图片时只触发了一次. 根据官网可以知道.上传 ...
ElementUI上传文件和额外参数
ElementUI 上传文件和额外参数需求是: 现有一后端接口,POST类型,参数为 @RequestParam("file") MultipartFile file,int c ...
关于element upload上传时额外参数的问题
笔者在用上传模块时存在一个问题,每次带的额外参数在第一次时都为空.因为涉及额外参数所以笔者用的是手动上传. <el-uploadclass="upload-demo"ref= ...
Element UI 上传组件实现文件上传并附带额外参数
1. 需求在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,效果如下图: 在上传指定 ...

iview upload 上传时携带额外参数

可以直接放到组件里用， “action”改为自己的接口路径；

iview upload 上传时携带额外参数相关推荐

最新文章

热门文章