elementUI upload插件中(怎样删除指定图片)

代码是这样的

<template>
    <div class="Multiselect" ref="Multiselect">
        <div class="abc" style="height:30px;width:10px;"></div>
        <div class="titleWrapper">
            <div class="top"> 
                <!--添加图片上传功能-->
                <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"
                      :file-list="fileList"
                      :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>
                <!--编辑选项内容部分-->
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import '@/common/js/mockCommon'
import {mapMutations,mapGetters} from 'vuex'

export default {

    props: {
        right: {
            type: String
        }
    },
    data() {
        return{
            flag: false,
            flagger: false,
            flaggger: false,
            imgUrlflag: false,
            
            MultiXianglen: '',
            dialogImageUrlduo: '',
            dialogVisible: false,
            imgURLduo: 'http://mockjs.com/dist/mock',
            imageUrlduo: [],
            imageNum: 0 ,
            fileList: []
        }
    },
    mounted() {
        this.$nextTick(() => {
            this._beforeFn()
        })
    },
    computed: {
        //筛选单选图片
        imgurlMulti2() {
            let arr =[]
            let strr = `${this.imgurlMulti}`
            return strr 
            if(this.imgUrlflag === true){
                //return this.imageNum
                let imagelen = this.imageUrlduo.length
                //const obj = JSON.parse()
                
//                  for(var i = 0; i<imagelen; i++) {
//                      
//                      arr.push(this.imageUrl[i])
//
//                  }
//                  return arr
                for(var i = 0; i<imagelen; i++) {
//                      if(i>(imagelen-this.imageNum)){
//                          arr.push(this.imageUrl[i])
//                      }
                    arr.push(this.imageUrlduo[i])
                }
                this.imgUrlflag = false
                return arr
            } 
        },
        ...mapGetters([
            'MultiBiaoti',
            'imgurlMulti',
            'MultiXiang',
            'danxuanAll',
            'Multi' 
        ])
    },
    methods: {
        //单选标题
        submitForms(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.$message.success('表单选项完成');
                console.log(this.ruleForms.MultiTit); 
                this.addMultiBiaoti(this.ruleForms.MultiTit);
                //flag: 判断标题是否提交
                this.flag = true;
              } else {
                this.$message.error('提交失败');
                this.flag = false;
                return false;
              }
            });
        },
        resetForms(formName) {
            this.flag = false;
            this.cutMultiBiaoti(this.ruleForms.MultiTit);
            this.$refs[formName].resetFields();
            this.$message.success('标题重置成功');
        },
        /*上传图片部分*/
        //图片成功上传
        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.imageNum--;
            //找到删除图片的地址,执行逻辑,即可得到所要的数组
            -----------------????????
     //------------这里找不到想要的被删除的img 地址! ------------------》求解
            //请求到的url和返回的url地址不统一。
            //console.log(fileList);
            console.log(file.url);
            this.cutimgurlMulti(this.imageUrlduo);
            console.log(this.imageUrlduo);
            //console.log(file);
            //console.log(this.imgurlMulti)
        },
        //图片预览
        handlePictureCardPreview(file) {
            this.dialogImageUrlduo = file.url;
            this.dialogVisible = true;
        },
        //页面刚刚加载完成执行的部分
        _beforeFn() {
            this.$refs.Multiselect.style.width = this.right;
            this.addDomain2();
            this.flaggger = false;
        },
        ...mapMutations({
            addMultiBiaoti: 'ADD_MULTIBIAOTI',
            cutMultiBiaoti: 'CUT_MULTIBIAOTI',
            addimgurlMulti: 'ADD_IMGURLMULTI',
            cutimgurlMulti: 'CUT_IMGURLMULTI',
            addMultiXiang: 'ADD_MULTIXIANG',
            cutMultiXiang: 'CUT_MULTIXIANG',
            adddanXuan: 'ADD_DANXUAN' 
        })  
    }
}
</script>

返回的值和想要的值是不同的!求解

阅读 10.2k
1 个回答

这删除 组件不就帮你把对应的删除了么

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题