el-upload设置图片上传格式

最新推荐文章于 2024-06-13 08:58:58 发布
最新推荐文章于 2024-06-13 08:58:58 发布
阅读量436 收藏
点赞数 1
文章标签： sqlite
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53545517/article/details/116810354
版权 
<template>
    <div class="pets-category-categoryMap">
        <div class="menus">
            <div class="menus-left">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-input size="mini" v-model="varietyId" placeholder="请输入品类名称/ID"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button size="mini" @click="find" type="primary">查询</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button size="mini" @click="addcat">添加</el-button>
                    </el-col>
                </el-row>
                <!-- 树形组件 -->
                <el-tree :data="datas" :props="defaultProps" @node-click="handleNodeClick" tyle="margin-top: 20px">
                </el-tree>
            </div>
            <div class="menus-right">
                <el-row :gutter="30">
                    <el-col :span="4">
                        父级品类:
                    </el-col>
                    <el-col :span="20" style="margin-left: -30px">
                        <el-cascader :options="parentDepart" size="mini" :props="optionProps" @change="handleChange" v-model="pids" style="width: 53%;"></el-cascader>
                    </el-col>
                </el-row>
                <el-row class="row">
                    品类ID: {{classId}}
                </el-row>
                <el-row class="row">
                    <el-form inline>
                        <el-form-item label="品类名字:">
                            <el-input size="mini" v-model="varietyName" style="width: 248px" placeholder="请输入品类名称, 0/4" maxlength="4"></el-input>
                        </el-form-item>
                    </el-form>
                </el-row>
                <!-- 图片上传Upload组件 -->
                <el-row class="row">
                    <el-col :span="3">
                        图片：
                    </el-col>
                    <el-col :span="13">
                        <el-row>
                            <el-upload class="avatar-uploader" 
                            :action="API.upload.sendBos"
                            accept=".jpg,.jpeg,.png"
                            :show-file-list="false" 
                            :on-success="handleAvatarSuccess" 
                            :before-upload="beforeAvatarUpload"
                            >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-upload2 avatar-uploader-icon"></i>
                            </el-upload>
                        </el-row>
                        <el-row class="row condition">只支持JPG/PNG图片，2M以内，比例1:1</el-row>
                    </el-col>
                </el-row>
                 <!-- 状态切换 -->
                <el-row style="margin-top: 20px">
                    <el-col :span="3">
                        状态：
                    </el-col>
                    <el-col :span="8">
                        <el-radio-group v-model="radio" @change="open"  :disabled ="varietyName==''">
                           <el-radio :label="0">启用</el-radio>
                           <el-radio :label="1">禁用</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row class="row" align="center">
                    <el-col :span="12" :push="1">
                        <el-button size="mini" style="width: 80px; margin: 0 10px" @click="preserve" type="primary">保存</el-button>
                        <el-button size="mini" style="width: 80px; margin-left: 20px" @click="delgoodsType">删除</el-button>
                    </el-col>
                </el-row>
            </div>
            <!-- 添加的弹框 -->
            <el-dialog title="无法添加" :visible.sync="addCategory" width="500px">
                <hr />
                <div class="warn">该品类下已有商品，无法添加子品类</div>
                <div style="text-align: center; margin-top: 30px">
                    <el-button size="mini" @click="confirmKnow" type="primary">我知道了</el-button>
                </div>
            </el-dialog>
            <!-- 禁用提示弹框 -->
            <el-dialog title="禁用提示" :visible.sync="forbidDialog" width="500px">
                <hr />
                <div class="warn">确定要禁用<span style="color: red; font-weight: 700">{{varietyName}}</span>吗?</div>
                <div><span style="color: red; font-weight: 700; margin-left: 150px">禁用后该品类下的子品类和商品无法使用。</span></div>
                <div style="text-align: center; margin-top: 30px">
                    <el-button size="mini" @click="isForbidDialog" type="primary">我知道了</el-button>
                </div>
            </el-dialog>
            <!-- 启用提示弹框 -->
            <el-dialog title="启用提示" :visible.sync="openDialog" width="500px">
                <hr />
                <div class="warn">确定要启用<span style="color: red; font-weight: 700">{{varietyName}}</span>吗?</div>
                <div style="text-align: center; margin-top: 30px">
                    <el-button size="mini" @click="enableType" type="primary">我知道了</el-button>
                </div>
            </el-dialog>
            <!-- 删除提示弹框 -->
            <el-dialog title="删除提示" :visible.sync="deleteDialog" width="30%">
                <div class="warn">确定要删除<span style="color: red; font-weight: 700">{{varietyName}}</span>吗?</div>
                <div style="text-align: center; margin-top: 30px">
                    <el-button size="mini" @click="deletecatDia" type="primary">我知道了</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pids: '', //父级id
            pid: '', //父级id
            datas: [], //tree
            parentDepart: [], // 父级品类数据
            // 父级品类设置
            optionProps: {
                value: 'id',
                label: 'goodsType',
                children: 'goodsTypeList',
                checkStrictly: true
            },
            id: '', // 当前选中的父级品类id
            content: true, // 值为true/false
            varietyId: "", // 输入品类ID
            
            defaultProps: {
                children: "goodsTypeList",
                label: "goodsType",
            },
            radio: '', //单选框   
            radios: [], // 
            imageUrl: "", //上传图片路径
            addCategory: false, //添加弹框
            forbidDialog: false, //禁用弹框
            openDialog: false, //启用弹框
            deleteDialog: false, //删除弹框
            switchDialog: false, //切换品类弹框
            radioSex: "", //弹框一级品类
            form: {
                //搜索框
                first: "",
                second: "",
                three: "",
            },
            varietyName: "", //品类名字
            classId: '', // 当前id
            selected: '', //父级id
            starshow: '',// 启用禁用
            isshow: '',
        };
    },
    methods: {
        handleChange(value) {
            console.log(value)
            this.pid = this.pids[this.pids.length-1] // 数组最后一个值就是最后选择的的父级id值
        },
        // 关键字查询
        find() {  
        if(this.varietyId=='') {
            this.getCategory()
        }else {
            this.$get({
               url: this.API.category.getGoodsTypeByCID,
               params: {
                   cidOrName: this.varietyId
               }
           }).then(res => {
               this.datas = res.data
           })
        }
        },
        // 点击添加，清除右边的数据
        addcat() {
            this.classId = ''   // 品类id
            this.varietyName = ''  // 品类名称
            this.imageUrl = ''  // 图片
            this.pids = [] //父级品类
            this.pid = '' // 父级部门id
            this.id = null
        },
        // 启用--禁用操作
        open(val) {
            if (val == 0) {
                this.openDialog = true;
                this.isshow = val
            }
            if(val == 1) {
                this.forbidDialog = true
                this.isshow = val
            }
        },
        // 确定启用
        enableType (){
            this.starshow = this.isshow
            this.openDialog = false
        },
        // 确认禁用
        isForbidDialog() {
            this.starshow = this.isshow
            this.forbidDialog = false;
        },
        // 保存
        preserve() {
            if (this.varietyName==''){
                this.$message({
                    type: 'warning',
                    message: '请输入品类名称'
                })
            }else {
                this.$post({
                    url: this.API.category.addOrUpGoodsType,
                    data: { 
                        goodsType: this.varietyName, // 品类名字
                        img: this.imageUrl,   // 图片
                        superiorId: this.pid, // 上级id //添加的时候传
                        isShow: this.starshow, // 是否显示 0为启用， 1为禁用
                        id: this.classId // 商品id,修改的时候传
                    },
                }).then((res) => {
                   if (res.code == 200) {
                       this.addcat() //清空数据
                       this.getCategory() // 初始化tree
                       this.$message({
                           type: 'success',
                           message:  "保存成功"
                       })
                   }else{
                       this.$message({
                           type: 'warning',
                           message: res.errMsg
                       })
                   }
                });
            }
            
        },
        delgoodsType(){
            this.deleteDialog = true
        },
        // 添加的弹框
        confirmKnow () {
            this.addCategory = false // 关闭弹窗
        },
        // 确认删除品类
        deletecatDia() {
            this.deleteDialog = false;
            this.$get({
                url: this.API.category.deleteGoodsType,
                params: {
                    goodsTypeId: this.classId
                }
            }).then(res => {
                if(res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getCategory()
                }else{
                    this.$message({
                        type: 'warning',
                        message: res.errMsg
                    })
                }
            })
        },
        //  tree的点击选中事件
        handleNodeClick(data) {
            // 树形组件回调
            this.id = data.id
            this.$get({
                url:this.API.category.getGoodsTypeByCID,
                params: {
                    cidOrName: this.id
                }
            }).then(res => {
                const { data } = res
                if (res.code == this.API.code.OK) {
                    console.log(data) // 回显数据
                    this.classId = data[0].id  // 品类id
                    this.varietyName = data[0].goodsType  // 品类名称
                    this.imageUrl = data[0].img  //图片
                    this.pid = (data[0].superIds[0] ? data[0].superIds[0].id: ''), // 父部门id
                    this.pids = (data[0].superIds[0] ? data[0].superIds[0].id: []) // 父部门id
                }
                
            })
        },
        handleAvatarSuccess(res) {
            //图片文件上传成功时的钩子
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.imageUrl = res.data   // 请求成功后的图片地址给到imageUrl
        },
        beforeAvatarUpload(file) {
            //图片上传之前的钩子，参数为上传的文件对上传的文件大小和文件格式判断
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (isJPG && isPNG) {
              this.$message({
                  type: 'error',
                  message: '上传头像图片只能是 JPG/PNG 格式!'
              })
            }
            if (!isLt2M) {
              this.$message({
                  type: 'error',
                  message: '上传头像图片大小不能超过 2MB!'
              });
            }
            return isJPG || isLt2M 
        },
        // tree树
        getCategory() {
            this.$post({
                url: this.API.category.getGoodsTypeAllById,
                data: {}
            }).then((res) => {
                const {data} = res
                if (res.code == this.API.code.OK) {
                    this.datas = data
                    this.parentDepart = res.data
                } else {
                    this.datas = []
                    this.parentDepart = []
                }
            });
        },
        
    },
    // 生命周期函数
    created () {
        this.getCategory(); // 进页面展示树状结构
    },
};
</script>
<style lang="scss" scoped>
.pets-category-categoryMap {
    background: #fff;
    height: 100%;
    width: 100%;
    padding: 10px;
    .menus {
        height: 100%;
        width: 100%;
        // background-color: pink;
        .menus-left {
            width: 40%;
            max-height: 420px;
            overflow: auto;
        }
        .menus-right {
            width: 60%;
            .row {
                margin-top: 20px;
                .el-form-item__label {
                    color: black;
                }
                .avatar-uploader .el-upload {
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }
                .avatar-uploader .el-upload:hover {
                    border-color: #409eff;
                }
                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 100px;
                    height: 100px;
                    line-height: 100px;
                    text-align: center;
                }
                .avatar {
                    width: 100px;
                    height: 100px;
                    display: block;
                    border: 1px dashed #909399;
                    display:flex;
	                align-items:center; 
	                justify-content:center;
                }
                &.condition {
                    font-size: 12px;
                    color: #909399;
                }
            }
        }
        .menus-left,
        .menus-right {
            padding: 20px 10px;
            float: left;
        }
        .warn {
            text-align: center;
            margin-top: 50px;
            color: black;
            font-weight: 700;
        }
        .select {
            height: 350px;
            border: 1px solid #909399;
            border-radius: 6px;
            padding: 10px 15px;
            position: relative;
        }
    }
    .menus::after {
        content: "";
        display: block;
        clear: both;
    }
}
</style>
weixin_53545517
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
接下来，我们需要在Vue组件中使用`el-upload`来实现图片上传。`el-upload`组件提供了一系列的属性和事件，让我们能够自定义上传过程。以下是一个简单的示例： ```html <el-form-item ref="uploadElement" prop=...
vue中el-upload上传图片到七牛的示例代码
12-29
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el v-model=listVideoQuery.orgLogo change=orgLogoChange></el> <el span=10 class=mt10> <el-upload class=...
Element的Upload组件实现图片上传
你的阿迁
08-04 3841
action="#"limit="1"<el-button type="primary" plain>上传</el-button>if (!this.$message.error('图片格式只能为jpeg/png/jpg/bmp/gif');if (!isLt2M) {this.$message.error('图片大小不能超过 2MB!');
vue 2.0+element ui 使用el-upload图片上传
qq_46630629的博客
11-09 1663
*使用el-upload将图片加载成Base64格式上传
el-upload 参数accept设置只能上传图片
最新发布
资深の小白的博客
06-13 694
el-upload设置只能上传图片
vue 图片压缩
limonero
09-27 1883
1、安装compressorjs npm i compressorjs 2、 文件中引入： importCompressorfrom'compressorjs' 3、获取到文件之后的处理： new Compressor(file, { quality: 0.2, success(result) { console.log(result) // 处理后的文件流BLOB // 以下为文件本地保存、下载查看...
Element-UI框架 —— Upload 上传(图片上传格式和大小判断)
Jana Jing的分享
12-09 2620
<el-upload class="pic-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" ::on-success="handleUploadSuccess" :on-preview="handlePictureCardPreview" > </el-upload> action：上传地址 on-success：上传成功 befo.
el-upload上传图片类型检查和大小限制
qq_47657875的博客
08-31 242
【代码】el-upload上传图片类型检查和大小限制。
vue结合el-upload实现腾讯云视频上传功能
11-20
在本文中，我们将探讨如何利用Vue.js和Element UI的el-upload组件来实现腾讯云视频上传功能，以解决在上传大体积视频时遇到的性能和用户体验问题。首先，我们需要理解为什么选择腾讯云作为视频上传的解决方案。传统...
el-upload上传校验格式、大小的实现方式
weixin_45557439的博客
04-21 1330
【代码】el-upload上传校验格式、大小的实现方式。
el-upload指定上传图片类型、尺寸、大小
ch_ss的博客
01-18 1203
el-upload指定上传图片类型、大小、尺寸
el-upload文件上传 图片格式限制
weixin_43162418的博客
04-09 444
el-upload文件上传 / 上传文件格式限制
el-upload做“图片大小”或者“图片格式”限制
m0_57364615的博客
10-26 2248
el-upload使用
element-ui中上传组件el-upload上传的图片，实现先本地预览后上传至服务器
qq_43092804的博客
12-16 4736
<el-form-item label="组头像"> <el-upload class="avatar-uploader" action=" " :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" ...
el-upload 上传图片文件方法
海胆的博客
03-08 473
格式需要在上传前进行校验 before-upload，accept 仅在文件选择时自动筛选，可被取消。覆盖action的默认请求行为是必要的 http-request，自定义上传方法。显示文件列表 file-list。自动上传 auto-upload。默认方法是单个文件提交的。
el-upload使用手动并限制图片类型及大小
茶荼
02-09 1037
upload上传 :before-upload 不生效，手动上传进行图片限制
el-upload 超详细-（附件，图片，多类型文件）玩转上传upload--new FormData()
m0_63005501的博客
01-14 9040
el-upload 超详细-（附件，图片，多类型文件）玩转上传upload--new FormData()
vue+elementui el-upload 图片类型，大小，尺寸限制
m0_49881056的博客
06-29 3205
2.在api文件引用接口。
el-element照片墙，upload图片上传
花椒和蕊的博客
05-11 2058
效果： 官方文档示例 注解： list-type：上传之后，图片的显示类型，有三种text、picture、picture-card。 --text类型显示为文本类型，预览时不能看到上传的图片 -- picture类型为长图片类型，预览时能够看到上传的图片 --picture-card类型是方图片类型，预览时能够看到上传的图片 limit 最大允许上传个数 accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） action 必选参数，
el-upload上传文件图片格式
08-27
el-upload 组件支持上传各种类型的文件和图片。您可以使用 accept 属性指定允许上传的文件类型。例如，如果您只想允许上传图片文件，可以这样设置： ```html <el-upload class="upload-demo" action="/your-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值