账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    elementUI upload插件中(怎样删除指定图片)
    30
    0

    代码是这样的

    <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>

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

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益