Vue上传头像组件-基于vue-cropper

谁借莪１个温暖的怀抱￠ 2021-07-25 20:02 987阅读 0赞

## 效果图：  ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![20210702144147604.png][]

# 一、安装依赖 #

cnpm i -S vue-cropper ali-oss

# 二、引入组件 #

@/components/AvatarUploader/index.vue

<template>
      <div class="AvatarUploader">
        <div>
          <span
            v-if="!avatarUrl"
            @click="openEditAvatarDialog()"
            style="
              display: inline-block;
              padding: 70px;
              border: 1px dashed gray;
              cursor: pointer;
            "
          >
            <el-tooltip effect="dark" content="上传头像" placement="top">
              <i class="el-icon-plus" />
            </el-tooltip>
          </span>
    
          <div v-else class="image">
            <el-image :src="avatarUrl" fit="fill" />
            <div class="mask">
              <el-tooltip effect="dark" content="预览头像" placement="top">
                <i
                  class="el-icon-zoom-in"
                  style="cursor: pointer"
                  @click="isVisible_previewAvatarDialog = true"
                />
              </el-tooltip>
              <el-tooltip effect="dark" content="删除头像" placement="top">
                <i
                  class="el-icon-delete"
                  style="cursor: pointer"
                  @click="deleteAvatar()"
                />
              </el-tooltip>
            </div>
          </div>
        </div>
        
        <el-dialog :visible.sync="isVisible_previewAvatarDialog">
          <img width="100%" :src="avatarUrl" />
        </el-dialog>
        
        <el-dialog
          title="修改头像"
          :visible.sync="isVisible_editAvatarDialog"
          width="800"
        >
          <el-row>
            <el-col :span="12" style="height: 300px">
              <vue-cropper
                ref="cropper"
                :img="options.img"
                :info="true"
                :autoCrop="options.autoCrop"
                :autoCropWidth="options.autoCropWidth"
                :autoCropHeight="options.autoCropHeight"
                :fixedBox="options.fixedBox"
                @realTime="realTime"
              >
              </vue-cropper>
              <div style="display: flex; padding-top: 20px">
                <el-upload
                  ref="uploadCropper"
                  :before-upload="beforeAvatarUpload"
                  :show-file-list="false"
                  action
                  style="margin-right: 10px"
                >
                  <el-button type="primary" size="small">上传头像</el-button>
                </el-upload>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="向左旋转"
                  placement="top"
                >
                  <el-button size="small" @click="rotateLeft"
                    ><i class="el-icon-refresh-left"></i
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="向右旋转"
                  placement="top"
                >
                  <el-button size="small" @click="rotateRight"
                    ><i class="el-icon-refresh-right"></i
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="放大"
                  placement="top"
                >
                  <el-button size="small" @click="changeScale(1)"
                    ><i class="el-icon-plus"></i
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="缩小"
                  placement="top"
                >
                  <el-button size="small" @click="changeScale(-1)"
                    ><i class="el-icon-minus"></i
                  ></el-button>
                </el-tooltip>
              </div>
            </el-col>
            <el-col :span="12" style="height: 300px">
              <div class="upload-preview">
                <img
                  :src="previews.url"
                  :style="previews.img"
                  v-show="previews.url"
                />
              </div>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button @click="isVisible_editAvatarDialog = false" size="small"
              >取 消</el-button
            >
            <el-button
              type="primary"
              :loading="loading"
              @click="submitUpdate"
              size="small"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import { VueCropper } from "vue-cropper";
    export default {
      name: "AvatarUploader",
      components: { VueCropper },
      props: {
        avatar: String,
    
        region: String,
        accessKeyId: String,
        accessKeySecret: String,
        bucket: String,
      },
      data() {
        return {
          isVisible_editAvatarDialog: false,
          isVisible_previewAvatarDialog: false,
          options: {
            img: "", //裁剪图片的地址
            info: true, //裁剪框的大小信息
            outputSize: 0.8, // 裁剪生成图片的质量
            outputType: "", // 裁剪生成图片的格式
            canScale: false, // 图片是否允许滚轮缩放
            autoCrop: true, //是否默认生成截图框
            autoCropWidth: 200, //默认生成截图框宽度
            autoCropHeight: 200,
            fixedBox: true, // 固定截图框大小 是否允许改变
            fixed: true, //是否开启截图框宽高固定比例
            fixedNumber: [1, 1], //截图框的宽高比例
            original: false, // 上传图片按照原始比例渲染
            centerBox: false, // 截图框是否被限制在图片里面
            infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          },
          previews: {},
          loading: false,
          avatarName: "", //头像名，包含后缀
          avatarUrl:this.avatar, //头像服务端链接
          client_alioss: {},
        };
      },
    
      created() {
        const OSS = require("ali-oss");
        this.client_alioss = new OSS({
          region: this.region,
          accessKeyId: this.accessKeyId,
          accessKeySecret: this.accessKeySecret,
          bucket: this.bucket,
        });
      },
      mounted() {},
      computed: {},
      methods: {
        //打开编辑头像窗口
        openEditAvatarDialog() {
          this.isVisible_editAvatarDialog = true;
          if (this.previews.url) {
            this.previews.url = "";
            this.options.img = "";
          }
        },
        // 实时预览函数
        realTime(data) {
          this.previews = data;
        },
        beforeAvatarUpload(file) {
          this.avatarName = this.$uuid.v1() + file.name; //包含后缀
          let uploadAccept = ["jpeg", "jpg", "png"]; //上传图片允许的格式
          let ext = file.type.split("/")[1]; //后缀名
          if (!uploadAccept.includes(ext)) {
            this.$message.warning("您上传的图片格式不符，请重新上传");
            return;
          }
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            this.options.img = reader.result; //base64
          };
        },
        changeScale(num) {
          this.$refs.cropper.changeScale(num);
        },
        rotateLeft() {
          this.$refs.cropper.rotateLeft();
        },
        rotateRight() {
          this.$refs.cropper.rotateRight();
        },
        //删除服务器中的头像
        async deleteAvatar() {
          try {
            if (this.avatarUrl) {
              let { pathname } = new URL(this.avatarUrl);
              await this.client_alioss.deleteMulti([decodeURIComponent(pathname)]); //删除服务器中的头像。decodeURIComponent解决中文乱码
              this.$message.success("头像删除成功");
              this.avatarUrl = "";
              this.$emit("deleteAvatar");
            }
          } catch (error) {
            this.$message.error("头像删除失败");
          }
        },
        //上传头像
        submitUpdate() {
          try {
            this.loading = true;
            this.$refs.cropper.getCropData(async (base64) => {
              let file_img = this.base64toFile(base64, this.avatarName);
              let { name } = file_img;
              let {
                res: { requestUrls },
              } = await this.client_alioss.multipartUpload(name, file_img);
              this.deleteAvatar(); //删除服务器中的旧头像
              this.avatarUrl = requestUrls[0]; //展示新头像
              this.$message.success("上传头像成功");
              this.$emit("avatarUrl", this.avatarUrl); //把头像url传出去
            });
          } catch (error) {
            this.$message.error("上传头像失败");
          } finally {
            this.loading = false;
            this.isVisible_editAvatarDialog = false;
          }
        },
        //base64转换为file类型
        base64toFile(base64, filename) {
          let arr = base64.split(","),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new File([u8arr], filename, { type: mime });
        },
      },
      watch: {},
    };
    </script>
    
    <style lang="scss" scoped>
    .AvatarUploader {
      .image {
        position: relative;
        display: inline-block;
        width: 150px;
        height: 150px;
        .mask {
          opacity: 0;
          color: white;
          font-size: 25px;
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
    
          display: flex;
          justify-content: space-evenly;
          align-items: center;
    
          &:hover {
            opacity: 1;
          }
        }
      }
    
      .upload-preview {
        position: relative;
        top: 50%;
        transform: translate(50%, -50%);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-shadow: 0 0 4px #bbbbbb;
        overflow: hidden;
      }
    }
    </style>

# 三、使用 #

<template>
      <div style="text-align: center">
        <AvatarUploader
            :avatar="avatar"
            :region="options_OSS.region"
            :accessKeyId="options_OSS.accessKeyId"
            :accessKeySecret="options_OSS.accessKeySecret"
            :bucket="options_OSS.bucket"
            @avatarUrl="getAvatarUrl"
            @deleteAvatar="deleteAvatar"
        ></AvatarUploader>
      </div>
    </template>
    <script>
    import AvatarUploader from "@/components/AvatarUploader/index.vue";
    export default {
      components: { AvatarUploader },
      data() {
        return {
          options_OSS: {
            region: "oss-cn-chengdu",
            accessKeyId: "LTAI5tQPHvixV8aakp1vg8Jr",
            accessKeySecret: "xYyToToPe8UFQMdt4hpTUS4PNxzl9S",
            bucket: "yimiao-manage",
          },
          avatar:""
        };
      },
      methods: {
        getAvatarUrl(avatarUrl) {
          console.log("头像url:", avatarUrl);
        },
        deleteAvatar() {
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210702144119861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210702144140179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20210702144147604.png]: /images/20210725/3c0198af79b64b2c998c928b0cbf0d60.png