element-ui上传图片的使用upload

最新推荐文章于 2024-08-12 10:43:21 发布

笑道三千

最新推荐文章于 2024-08-12 10:43:21 发布

阅读量1.4k

点赞数

分类专栏： # element ui后台管理系列

本文链接：https://blog.csdn.net/weixin_42349568/article/details/112555743

版权

element ui后台管理系列专栏收录该内容

56 篇文章 5 订阅

订阅专栏

一，实现效果

二，实现代码

   <el-upload
     :action="host"
     list-type="picture"
     multiple
     :limit="1"
     :data="{'sessionSecret':sessionSecret}"
     name='image'
     ref="my-upload"
     :show-file-list="false"
     :before-upload="beforeAvatarUpload"
     :on-exceed="handleExceed"
     :on-success="handleSuccess"
     :file-list="fileList">
     <div class="pic-uploader">
       <div class="maskbox" v-if="fileList.length>=1">
         <img  :src="item.url" class="pic" v-for="(item,index) in fileList" :key="index">
         <div class="mask">
           <button @click.stop="deleteImg">删除</button>
         </div>
       </div>
       <img v-else src="@/assets/picture.png" class="default-pic" />
     </div>
     <el-button class="redBtn dpb borderBtn"  type="primary" >选择图片(200*200）</el-button>
   </el-upload>

在这里插入图片描述

      // 图片上传成功回调
      handleSuccess(res, file) {
        this.fileList.push(file)   //将上传的图片预显在页面
        if(res.code=='10000'){
          this.ruleForm['img_url']=res.img_url     //将接口返回的图片地址存到表单
        }
      },
      //图片上传的校验-小于5M
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 5;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isLt2M;
      },
      //上传图片超出数量的处理函数
      handleExceed() {
        this.$message.warning(`当前限制选择 1 张图片，鼠标移动到图片上可删除现有图片`);
      },
      // 删除图片
      deleteImg() {
        this.fileList=[]
        this.ruleForm['img_url']=''
        this.$refs['my-upload'].clearFiles();
      },