新增Upload 上传,怎么才能分别调用方法呢?
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
<el-form ref ="merchantform" :model= "merchantform" :inline="true" :label-position= "labelPosition" label-width="103px" class="form-style">
<div style="font-size: 16px;color: #666666; font-weight: bold;">受益人信息</div>
<!-- 动态生成受益人信息表单 -->
<div class="moreRules">
<div class="moreRulesIn" v-for="(item, index) in merchantform.beneficiaryInfo" :key="item.key">
<el-row>
<el-col :span="8">
<el-form-item label="依据文件" :prop ="'beneficiaryInfo.' + index +'.checkFileId'" :rules="moreNotifyOjbectRules.checkFileId">
<el-upload class="avatar-uploader"
ref= "upload" name="checkFileId" v-model="item.checkFileId"
action="doUpload"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:on-success="handleAvatarSuccess"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"style="line-height:140px;"></i>
</el-upload>
<el-button type="primary" plain>浏览</el-button>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<el-button type="primary" plain @click="addUser()" v-show="add_user">新增</el-button>
</el-form>
addUser() {
if(this.merchantform.beneficiaryInfo.length < 4 ){
this.merchantform.beneficiaryInfo.push({
checkFileId:’’
})
}else{
this.$message({ message: ‘最多添加4个’});
}
},
beforeAvatarUpload(file) {
const isJPEG = file.type === ‘image/jpeg’;
const isJPG = file.type === ‘image/jpg’;
const isPNG = file.type === ‘image/png’;
const isBMP = file.type === ‘image/bmp’;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isJPEG && !isPNG && !isBMP) {
this.$message.error('上传图片必须是JPG/JPEG/PNG/BMP 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
if((isJPEG || isJPG || isPNG || isBMP) && isLt2M == true){
//获取图片流
var This = this;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
// console.log(this.result)
// const checkFileId=This.merchantform.beneficiaryInfo[0].checkFileId;
// Upload(file,this.result, This.custId,This.$axios.post,checkFileId);
This.imageUrl = this.result;
const index_IndexOf = This.imageUrl.lastIndexOf("\,");
const fileContent = This.imageUrl.substring(index_IndexOf+1,This.imageUrl.length);
let paramsData ={
custId: This.custId,
fileName: "P44",
fileType: file.type,
fileContent: fileContent
}
let Num = randomNum2(16);
paramsData = encrypt(JSON.stringify(paramsData),Num);
let pubPara = pubParams(Num);
pubPara['interfaceId'] = 'F030401';
This.$axios.post(window.API_HOST+'/uploadFile',pubParameter2(paramsData,pubPara,Num)).then((res)=>{
let restrue = verifyMD5(res.data);
if(restrue.res_chekV != false){
let res_encMsg = res.data.encMsg;//解密
res_encMsg = JSON.parse(decrypt(res_encMsg,restrue.res_aeskey));
console.log(res_encMsg)
if(res_encMsg.resCode == 'S010000'){
let resData = JSON.parse(res_encMsg.resData);
This.merchantform.beneficiaryInfo[0].checkFileId = resData.fileId
This.$message({
message: '上传'+ res_encMsg.resMsg,
type: 'success'
});
}
}
})
}
}
return false //屏蔽了action的默认上传
},
请问怎么修改,我想要新增一个上传组件,然后每新增一个调用单个上传方法, 现在只能新增和新增的上传组件只能共用一个上传方法!求大神