vue+element upload上传带参数的实例
作者:QQ帝国 时间:2024-05-09 09:32:56
element upload上传带参数
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">保存</el-button>
<el-upload
class="upload-demo"
ref="upload"
:action="action()"
:on-preview="handlePreview"
:before-upload="beforeUpload"
:data="uploadData"
:on-error = "error"
:on-success="successResave"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
data里面参数
uploadData:null,
methods里面
action(){
return this.portC+"uplodResultsScore"
},
//上传
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
beforeUpload (file) {
this.uploadData = {dstype:this.proType,name:this.mobanname,dsmark:this.value5,};
console.log(this.uploadData)
let promise = new Promise((resolve) => {
this.$nextTick(function () {
resolve(true);
});
});
return promise; //通过返回一个promis对象解决
},
//上传成功钩子
successResave(response, file, fileList){
console.log(response)
if(response.code==10001){
alert("保存成功")
this.proType="";
this.mobanname="";
this.value5="";
this.$router.push("/moban")
}
},
//失败钩子
error(response, file, fileList){
console.log(response)
},
//选择家化实效
selectType(val){
console.log(val)
if(val==1){
this.$router.push("/new")
}else{
this.$router.push("/new1")
}
},
效果图
element上传函数带参数,自定义传参
下面这是标签
可以看出来 :
http-request="(params) =>beforeMasterPictureUpload(params,‘ruleForm',fileList0)"
http-request 传递参数的方法 是可以这样写的,其他方法一样,但是如果写错少些可能会导致覆盖原来的方法。
<el-upload :class="{hidesse:hideUpload0,'avatar-uploader':true}"?
?? ??? ??? ??? ??? ??? ?multiple action="这里不需要填或者随便写"
? ? ? ? ? ? ? ? ? ? ? ? list-type="picture-card" :before-upload="beforeAvatarUpload"
? ? ? ? ? ? ? ? ? ? ? ? :on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList0)"
? ? ? ? ? ? ? ? ? ? ? ? :http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList0)"
? ? ? ? ? ? ? ? ? ? ? ? :on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList0')"
? ? ? ? ? ? ? ? ? ? ? ? :on-exceed="OnExceed"
? ? ? ? ? ? ? ? ? ? ? ? :on-remove="(params) =>handleRemove(params,'ruleForm',fileList0,'fileList0')" :limit="5"
? ? ? ? ? ? ? ? ? ? ? ? :file-list="fileList0" @click="titext">
? ? ? ? ? ? ? ? ? ? ? ? <i class="el-icon-plus"></i>
? ? ? ? ? ? ? ? ? ? </el-upload>
下面是JS 接受方法 同样 我们拿 http-request 这个方法做例子
beforeMasterPictureUpload(params, fromData, prop) {
?? ?console.log('----aaaa', this.fileList);
? ? console.log('file', params, fromData, prop);
}
大家可以输出看看结果 是否有拿到你上面传递过来的字符串或者是值
我将源码放上
HTML标签
<el-upload :class="{hidesse:hideUpload0,'avatar-uploader':true}"?
?? ??? ??? ??? ??? ??? ?multiple action="这里不需要填或者随便写"
? ? ? ? ? ? ? ? ? ? ? ? list-type="picture-card" :before-upload="beforeAvatarUpload"
? ? ? ? ? ? ? ? ? ? ? ? :on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList0)"
? ? ? ? ? ? ? ? ? ? ? ? :http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList0)"
? ? ? ? ? ? ? ? ? ? ? ? :on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList0')"
? ? ? ? ? ? ? ? ? ? ? ? :on-exceed="OnExceed"
? ? ? ? ? ? ? ? ? ? ? ? :on-remove="(params) =>handleRemove(params,'ruleForm',fileList0,'fileList0')" :limit="5"
? ? ? ? ? ? ? ? ? ? ? ? :file-list="fileList0" @click="titext">
? ? ? ? ? ? ? ? ? ? ? ? <i class="el-icon-plus"></i>
? ? ? ? ? ? ? ? ? ? </el-upload>
JS语句
// 主图上传之前
? ? ? ? ? ? ? ? beforeAvatarUpload(file) {
? ? ? ? ? ? ? ? ? ? console.log('主图上传之前:', file)
? ? ? ? ? ? ? ? ? ? const idJPG =
? ? ? ? ? ? ? ? ? ? ? ? file.type === "image/jpeg" || "image/gif" || "image/png" || "image/bmp";
? ? ? ? ? ? ? ? ? ? if (!idJPG) {
? ? ? ? ? ? ? ? ? ? ? ? this.$message.error(
? ? ? ? ? ? ? ? ? ? ? ? ? ? '123123'
? ? ? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? return idJPG;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 图片触发
? ? ? ? ? ? ? ? onChangeMaster(file, fileList, fromData, prop) {
? ? ? ? ? ? ? ? ? ? // fileList 当前上传框的数据?
? ? ? ? ? ? ? ? ? ? switch (prop) {
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList0':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload0 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList1':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload1 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList2':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload2 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList3':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload3 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList4':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload4 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList5':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload6 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? console.log('判断一次', file, fileList, this.fileList0)
? ? ? ? ? ? ? ? ? ? if (this.inde > 0) {
? ? ? ? ? ? ? ? ? ? ? ? return
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? //let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
? ? ? ? ? ? ? ? ? ? ? ? //if (existFile) {
? ? ? ? ? ? ? ? ? ? ? ? ? ?// this.inde++
? ? ? ? ? ? ? ? ? ? ? ? ? // ?console.log(existFile)
? ? ? ? ? ? ? ? ? ? ? ? ? // ?this.$message.error(
? ? ? ? ? ? ? ? ? ? ? ? ? // ? ? ?'图片重复' + existFile.name
? ? ? ? ? ? ? ? ? ? ? ? // ? ?);
? ? ? ? ? ? ? ? ? ? ? ? // ? ?// fileList.pop()
? ? ? ? ? ? ? ? ? ? ?// ? }
? ? ? ? ? ? ? ? ? ? ? ? this[prop] = fileList
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 图片个数超出限制
? ? ? ? ? ? ? ? OnExceed(file, fileList) {
? ? ? ? ? ? ? ? ? ? this.$message.error(
? ? ? ? ? ? ? ? ? ? ? ? '每个选项最多上传5张', "error"
? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? handleRemove(params, fileList, prop, item) {
? ? ? ? ? ? ? ? ? ? prop.forEach((obj, index) => {
? ? ? ? ? ? ? ? ? ? ? ? console.log(index, obj)
? ? ? ? ? ? ? ? ? ? ? ? if (params.uid == obj.uid) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? prop.splice(index, 1)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? console.log('删除后的数组', prop);
? ? ? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? ? ? switch (item) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList0':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload0 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList1':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload1 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList2':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload2 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList3':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload3 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList4':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload4 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList5':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload6 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? console.log(prop.length >= this.limitCount)
? ? ? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? ? ? ? ? // this.fileList = [];
? ? ? ? ? ? ? ? ? ? this.dialogImageUrl = '';
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? handlePictureCardPreview(file, fromData, prop) {
? ? ? ? ? ? ? ? ? ? console.log(file, fromData, prop)
? ? ? ? ? ? ? ? ? ? this.dialogImageUrl = file.url;
? ? ? ? ? ? ? ? ? ? this.dialogVisible = true;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? beforeMasterPictureUpload(params, fromData, prop) {
? ? ? ? ? ? ? ? ? ? console.log('----aaaa', this.fileList);
? ? ? ? ? ? ? ? ? ? console.log('file', params, fromData, prop);
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? },
这是需求案列
来源:https://qiaoyajun.blog.csdn.net/article/details/86354267
标签:element,upload,上传,参数
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python调用win32接口进行截图的示例
2021-07-22 07:19:45
Python设计模式之模板方法模式实例详解
2023-07-21 01:29:19
![](https://img.aspxhome.com/file/2023/4/109404_0s.png)
MySQL实现字段或字符串拼接的三种方式总结
2024-01-22 04:23:47
![](https://img.aspxhome.com/file/2023/4/124064_0s.png)
Python 安装setuptools和pip工具操作方法(必看)
2023-11-06 11:46:07
![](https://img.aspxhome.com/file/2023/1/65091_0s.png)
详解Bootstrap创建表单的三种格式(一)
2024-05-10 14:08:19
![](https://img.aspxhome.com/file/2023/2/126812_0s.png)
Python assert断言声明,遇到错误则立即返回问题
2022-05-10 13:38:50
asp中InstrRev的语法
2008-01-22 18:14:00
Oracle数据库SQL语句性能调整的基本原则
2009-03-25 16:55:00
一篇文章带你搞定 springsecurity基于数据库的认证(springsecurity整合mybatis)
2024-01-20 23:15:34
![](https://img.aspxhome.com/file/2023/7/119157_0s.png)
javascript轻量级库createjs使用Easel实现拖拽效果
2024-05-22 10:41:16
Python json解析库jsonpath原理及使用示例
2022-05-18 09:43:00
用 Schema 约束 XML 数据
2010-08-24 18:21:00
![](https://img.aspxhome.com/file/UploadPic/20108/24/20100814231755976-28s.gif)
Mysql通过Adjacency List(邻接表)存储树形结构
2024-01-18 01:31:37
![](https://img.aspxhome.com/file/2023/8/77318_0s.png)
python 如何将字典写为json文件
2021-07-22 18:39:39
MySql查询某个时间段内的数据实例(前一周、前三个月、前一年等)
2024-01-18 09:36:31
![](https://img.aspxhome.com/file/2023/3/100333_0s.png)
通过优化CSS代码 减小对系统资源的占用
2010-08-03 12:33:00
Python读写Redis数据库操作示例
2024-01-13 02:09:05
Python基础-特殊方法整理详解
2022-08-11 00:46:31
![](https://img.aspxhome.com/file/2023/9/134439_0s.jpg)
Python爬取qq空间说说的实例代码
2021-04-28 01:29:50
如何在Python里使用ChatGPT及ChatGPT是什么?注册方式?
2022-12-01 22:43:12
![](https://img.aspxhome.com/file/2023/8/124378_0s.jpg)