el-upload上传多张图片

最新推荐文章于 2023-07-18 10:01:19 发布

程序媛之进击的菜鸟

最新推荐文章于 2023-07-18 10:01:19 发布

阅读量1k

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_53884488/article/details/125781368

版权

<el-form-item label="商品图片"  v-if="form.foodtype==0">
          <div  v-if="dialogImageUrlList.length>0">  //遍历回调
            <div v-for="(item,index) in dialogImageUrlList" :key="index"  
 class="avatarimage">
              <img  width="30%" height="30%"  :src="item">
              <div @click="removeImageList(item)" class="avatarremove">X</div>
            </div>
          </div>
        <el-upload
            ref="uploadImg"
            action="/hotmenu/hoteats/image/uploadFood"  //后端接口
            list-type="picture-card"
            :on-remove="handleRemove"
            accept=".png,.jpg,.jpeg"
            :on-success="beforeProductUpload"     
            :headers="headers" 
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!-- <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl2" alt="">
        </el-dialog> -->
      </el-form-item>

//上传成功
beforeProductUpload(response, file, fileList){   
        this.foodsImgList.push(response.data)
        console.log(this.foodsImgList)      
    },
//删除回调
removeImageList(item){
      for(var i=0;i<this.dialogImageUrlList.length;i++){
        if(this.dialogImageUrlList[i]==item){
        this.dialogImageUrlList.splice(i,1)
      }
      }
      console.log(this.dialogImageUrlList)
    },

  //移除图片功能
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },

// 提交按钮
    submitForm: function() {
      
      this.$refs["form"].validate(valid => {
        if (valid) {
            for(var i=0;i<this.dialogImageUrlList.length;i++){
              this.foodsImgList.push(this.dialogImageUrlList[i])
            }
            this.form.imgs=this.foodsImgList;
            if(this.foodsImgList.length==0){
	            this.$modal.msgError('至少上传一张商品图片！')
            }else{
          updateFood(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.reset();
              this.$forceUpdate()
              this.$refs.uploadImg.clearFiles();
            });
            }
           
          } else {
           this.isSubmitForm=false;
           this.form.imgs=this.foodsImgList;
           console.log(this.form)
           if(this.foodsImgList.length==0){
	            this.$modal.msgError('至少上传一张商品图片！')
            }else{
            addFood(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.reset();
              this.$forceUpdate()
              this.$refs.uploadImg.clearFiles();
            });
            }
            
          }
        }
      });
    },