undefinedfix
Sign in

In the elementui upload plug-in (get the index of the picture to be deleted, how to transfer the obtained index into the handleremove event)

thienhabetsi edited in Mon, 23 Aug 2021
<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: '请输入标题名称', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            //{ pattern:/^(?![0-9])[0-9a-zA-Z_\u4e00-\u9fa5]+$/, message: '只允许字母和汉字开头'}
        ]
    }
    
    
}

}

/Upload picture section/

        //图片成功上传
        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);
        },
        //图片预览
        handlePictureCardPreview(file) {
            this.dialogImageUrlduo = file.url;
            this.dialogVisible = true;
        },


















At present, I don't know how to delete the specified picture (that is, each picture has a delete icon. Click the delete icon to delete the picture)

clipboard.png

6 Replies
htbdq
commented on Mon, 23 Aug 2021

clipboard.png

Give the file list, no matter delete or add, don't you need to do it

salemndt
commented on Mon, 23 Aug 2021

Delete the parameter (file, filelist) in the callback. The second parameter is an array (such as picarr) in the currently bound data returned after successful deletion. You can directly assign the parameter filelist in the callback to the array in your bound data this.picArr = fileList

dsvick
commented on Tue, 24 Aug 2021

In the callback function, reassign the variable holding the picture address to an empty string or other value you want

user282
commented on Tue, 24 Aug 2021

clipboard.png

kuufv
commented on Tue, 24 Aug 2021

From the official document: in your code

:on-remove="handleRemove"

It is the deletion callback, which will get the current deleted file object and the entire filelist.

therock24
commented on Tue, 24 Aug 2021

Have you solved the problem?

lock This question has been locked and the reply function has been disabled.