新增Upload 上传,怎么才能分别调用方法呢?
发布于 3 年前 作者 clubadmin 1297 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

1

<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的默认上传
},

2

请问怎么修改,我想要新增一个上传组件,然后每新增一个调用单个上传方法, 现在只能新增和新增的上传组件只能共用一个上传方法!求大神

回到顶部