<el-upload
                :action="api+'upload'"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"    //点击已上传文件的事件
                :on-remove="handleRemove"                       //点击移除时的事件
                :before-upload="beforeAvatarUpload14"     //上传之前的事件
                :file-list='this.dialogImageUrl'
                >
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>






 //点击移除时的事件
handleRemove(file, fileList) {
                console.log(file, fileList);
                let a = file.url
                console.log(a)
                let b = this.imageUrl.indexOf(a)
                console.log(b)
                this.imageUrl.splice(b,1)
                this.dialogImageUrl.splice(b,1)
                console.log(this.imageUrl)
            },
            //点击已上传文件的事件
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 头像上传之前
            beforeAvatarUpload14(file) {
                
            var that = this;
            // 判断类型是不是图片
            if (!/image\/\w+/.test(file.type)) {
                that.$message("请确保文件为图像类型");
                return false;
            } else {
                let fd = new FormData();
                fd.append("media", file); //传文件
                that.$axios({
                    method: "post",
                    url: that.api + "upload",
                    data: fd
                }).then(res => {
                    // console.log(res);
                    if(res.data.status == 1){
                        that.imageUrl.push(res.data.result.url);
                        this.dialogImageUrl.push({
                                'url':res.data.result.url
                            })
                        console.log(that.imageUrl)
                    }
                });
            }
        },
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐