鍍金池/ 問答/HTML/ elementUI upload插件中(獲取將要刪除圖片的index,如何將獲取

elementUI upload插件中(獲取將要刪除圖片的index,如何將獲取的index傳入handleremove事件)

<div style="border: 1px dashed red;" class="imgAdd">
<el-upload
  :action="imgURLduo"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :before-upload="beforeAvatarUpload"
  :on-success="handleAvatarSuccess">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
        <img width="120%" :src="dialogImageUrlduo" alt="">
</el-dialog>

</div>

data() {

return{
    
    flag: false,
    flagger: false,
    flaggger: false,
    imgUrlflag: false,
    
    MultiXianglen: '',
    dialogImageUrlduo: '',
    dialogVisible: false,
    imgURLduo: 'http://mockjs.com/dist/mock',
    imageUrlduo: [],
    imageNum: 0 ,
    dynamicValidateForm2: {
      domains: [{
        value: ''
      }]
    },
    ruleForms: {
        MultiTit: ''
    },
    ruless: {
        MultiTit: [
            { required: true, message: '請輸入標(biāo)題名稱', trigger: 'blur' },
            { min: 1, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
            //{ pattern:/^(?![0-9])[0-9a-zA-Z_\u4e00-\u9fa5]+$/, message: '只允許字母和漢字開頭'}
        ]
    }
    
    
}

}

/上傳圖片部分/

        //圖片成功上傳
        handleAvatarSuccess(res, file) {
           this.imageUrlduo = URL.createObjectURL(file.raw);
           console.log(this.imageUrlduo);
           
           this.addimgurlMulti(this.imageUrlduo);
           console.log(this.imgurlMulti)
           this.$message.success('圖片上傳成功');

        },
        //圖片更新
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isGIF = file.type === 'image/gif';
            const isPNG = file.type === 'image/png';
            const isBMP = file.type === 'image/bmp';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上傳圖片必須是JPG/GIF/PNG/BMP 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上傳圖片大小不能超過 2MB!');
            }
            this.imageNum++;
            if(this.imageNum>3){
                   this.$message.error('最多只能上傳3張圖片');
                return (!isJPG || !isBMP || !isGIF || !isPNG) && !isLt2M;
            }
           return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
        },
        //圖片刪除
        handleRemove(file, fileList) {
            if(this.imageNum>3){
                this.imageNum--;
                return
            }
            //this.cutimgurlMulti(this.imageUrlduo);
            this.imageNum--;
            
            console.log(this.imageUrlduo);
            console.log(file, fileList);
        },
        //圖片預(yù)覽
        handlePictureCardPreview(file) {
            this.dialogImageUrlduo = file.url;
            this.dialogVisible = true;
        },


















,目前不知道怎么刪除指定的圖片(就是每個圖片都有一個刪除圖標(biāo),點(diǎn)擊這個刪除圖標(biāo)就刪除這個圖片)

clipboard.png

回答
編輯回答
純妹

clipboard.png

2017年1月11日 17:36
編輯回答
影魅

clipboard.png

給上file-list, 不管刪除還是添加, 不是都不用你動手么

2017年5月24日 01:06
編輯回答
夢若殤

刪除回調(diào)中的參數(shù)(file, fileList),第二個參數(shù),是刪除成功以后返回的當(dāng)前綁定的data中的某個數(shù)組(例如picArr),你可以直接把回調(diào)中的參數(shù)fileList直接賦給你綁定的data中的數(shù)組
this.picArr = fileList

2018年1月1日 11:49
編輯回答
你好胸

在回調(diào)函數(shù)中 把保存圖片地址的變量重新賦值成 空字符串或者其他你想要的值

2018年5月29日 08:28
編輯回答
乖乖瀦

來自官方文檔:
clipboard.png
你的代碼里

:on-remove="handleRemove"

就是刪除的回調(diào),會拿到當(dāng)前刪除的file對象,和整個fileList。

2017年10月18日 01:32