鍍金池/ 問答/HTML/ elementUI upload插件中(怎樣刪除指定圖片)

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>
                <!--編輯選項(xiàng)內(nèi)容部分-->
            </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: {
        //單選標(biāo)題
        submitForms(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.$message.success('表單選項(xiàng)完成');
                console.log(this.ruleForms.MultiTit); 
                this.addMultiBiaoti(this.ruleForms.MultiTit);
                //flag: 判斷標(biāo)題是否提交
                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('標(biāo)題重置成功');
        },
        /*上傳圖片部分*/
        //圖片成功上傳
        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--;
            //找到刪除圖片的地址,執(zhí)行邏輯,即可得到所要的數(shù)組
            -----------------????????
     //------------這里找不到想要的被刪除的img 地址! ------------------》求解
            //請求到的url和返回的url地址不統(tǒng)一。
            //console.log(fileList);
            console.log(file.url);
            this.cutimgurlMulti(this.imageUrlduo);
            console.log(this.imageUrlduo);
            //console.log(file);
            //console.log(this.imgurlMulti)
        },
        //圖片預(yù)覽
        handlePictureCardPreview(file) {
            this.dialogImageUrlduo = file.url;
            this.dialogVisible = true;
        },
        //頁面剛剛加載完成執(zhí)行的部分
        _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>

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

回答
編輯回答
逗婦乳

這刪除 組件不就幫你把對應(yīng)的刪除了么

2018年5月29日 14:06