vue图片上传

猿didi

已于 2022-05-31 16:25:46 修改

阅读量171

点赞数 2

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-05-31 16:14:40 首次发布

本文链接：https://blog.csdn.net/qq_40263124/article/details/125067772

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

这篇博客展示了如何在Vue项目中使用ElementUI组件库实现单张图片上传及缩略图预览功能。前端代码包括上传按钮和缩略图显示，通过`el-upload`组件控制上传，并在图片改变时调用`imgPreview`方法生成缩略图。同时提供了放大、删除图片的功能以及图片全屏预览。JS代码处理了图片预览、放大和删除的逻辑，而CSS代码定义了上传区域和缩略图的样式。

摘要由CSDN通过智能技术生成

vue实现图片上传（单张，带缩略图）

效果图：
请添加图片描述

使用的是elementui
需要先在main.js中引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

前端代码：

 <td id="break_text" style="color: #34a0f5;font-weight: bold;width: 100px;">坏卡照片</td>

              <td id="break_img">
                <!-- 缩略图显示-->
                <div class="img-show" v-if="imgUrl">
                  <img :src="imgUrl" class="avatar">
                  <span class="actions">
                  <!-- 放大 -->
                  <span class="item">
                    <i class="el-icon-zoom-in" @click="enlarge()"></i>
                  </span>
                    <!-- 删除 -->
                  <span class="item">
                    <i class="el-icon-delete" @click="del()"></i>
                  </span>
                </span>
                </div>
                <!-- 坏卡图片上传 -->
                <el-upload v-else action="#" class="uploader-avatar"
                           style="font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;border: 1px dashed #d9d9d9;"
                           list-type="picture" :auto-upload="false" :show-file-list="false" :on-change="imgPreview">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <!-- 图片显示对话框 -->
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogUrl" alt="">
                </el-dialog>
              </td>

data() {
    return {
			imgUrl: '',
			break_base64: '',//坏卡照片（将其转为base64传到后台）
      }
  }

js代码：

methods: {
 //图片缩略图
    imgPreview: function (file) {
      //生成临时缩略图
      this.imgUrl = URL.createObjectURL(file.raw);

      //转成base64
      const This = this;
      const reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function (e) {
        // this.result // 这个就是base64编码了
        this.break_base64 = this.result;
        //console.log("图片", this.break_base64);
      }

    },
    enlarge: function () {
      this.dialogVisible = true;
      this.dialogUrl = this.imgUrl;
    },
    del: function () {
      this.imgUrl = '';
      this.dialogUrl = '';
    },
}

css 代码：

.uploader-avatar >>> .el-upload {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
  overflow: hidden;
}

.img-show {
  position: relative;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  overflow: hidden;
}

.uploader-avatar >>> .el-upload:hover {
  border-color: #409EFF;
}

.uploader-avatar >>> i {
  font-size: 28px;
  color: #8c939d;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}

.actions {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 148px;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s;
}

.actions:hover {
  opacity: 1;
}

.actions:hover span {
  display: inline-block;
}

.actions span {
  display: none;
  margin: 0 16px;
  cursor: pointer;
}