Before in the project encountered the problem of image upload, there are still many details to pay attention to.

The following is the rendering to be completed at that time:

 

Idea: logo1 and logo2 are the same line. Click Add to add another line. At this time, an object array is used to store the name and url attributes of logo1, and another object array is used to store the name and url attributes of logo2. At the same time, when we click "click to upload", we need to get the current index, so that I can know which one of the array is to upload the image.

Specific code:

                        <el-row>
                            <el-col :span="10" :offset="1">
                                <el-form-item label="Equity logo1:" prop="logo1">
                                    <el-upload :action="upLoadUrl"
                                        :show-file-list="false"  
                                        ref="upload"
                                        :on-success="upLoadSuccess" 
                                        :before-upload="beforeUpload">
                                        <el-button @click="uploadPic(index)"  size="small" type="primary">Click upload</el-button>
                                        <div class="el-upload__tip" slot="tip">Upload only jpg/png Documents, and no more than 3 M</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="Equity logo2:" prop="logo2">
                                    <el-upload :action="upLoadUrl" 
                                        ref="upload"
                                        :show-file-list="false" 
                                        :on-success="upLoadSuccess1" 
                                        :before-upload="beforeUpload"
                                        >
                                        <el-button @click="uploadPic(index)" size="small" type="primary">Click upload</el-button>
                                        <div class="el-upload__tip" slot="tip">Upload only jpg/png Documents, and no more than 3 M</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>

//Verify before upload
        beforeUpload(file) {
            //Upload support format (. doc/.docx/.pdf/.rar/.zip/.xls/.xlsx/.ppt)
            let reg = /\.(jpg|jpeg|png)$/i;
            if (!reg.test(file.name)) {
                this.$message({
                    showClose: true,
                    message: 'Upload support format(.jpg/.jpeg/.png)',
                    type: 'error'
                });
                return false;
            }
            
            else if (file.size > 500 * 1024) {
                this.$message({
                    showClose: true,
                    message: 'File size up to 500 K',
                    type: 'error'
                });
                return false;
            }
        },

// Click to upload the image
        uploadPic (index) {
            this.index = index;
        },
//This is the hook function for the successful upload of logo1, so the same is true for the hook function after the successful upload of logo2
        upLoadSuccess(response, file, fileList) {
            console.log(fileList)
            let self = this;
            if (response.code === 0) {
                if(this.upLoadImg){
                    this.$message({
                        showClose: true,
                        message: 'Upload succeeded!',
                        type: 'success'
                    });
                }
                this.upLoadImg = {
                    name: response.data.fileName,
                    url: response.data.fileUrl
                }
                this.$set(self.picture, self.index, self.upLoadImg)
                let fileListIndex = fileList.length-1;
                this.benefitList[this.index].logo1 = fileList[fileListIndex].response.data.fileUrl;
         
            } else {
                //Upload failed empty upload list
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
                });
            }
        
        },

                        <el-row >
                            <el-col :offset="1" :span="10">
                                <div  class="el-card wd150 borderno">
                                    <div class="imgStyle">
                                        <img  v-if="picture[index] && picture[index].name"  v-bind:src="picture[index].url | filterImg"  class="p10" />
                                    </div>
                                </div>
                            </el-col>
                            <!-- logo2Offset [0,0,11,0] -->
                            <el-col :span="10">  
                                <div  class="el-card wd150 borderno">
                                    <div class="imgStyle">
                                        <img v-if="picture1[index] && picture1[index].name" v-bind:src="picture1[index].url | filterImg"  class="p10" />
                                    </div>
                                </div>
                            </el-col>
                           
                        </el-row>