消除控制台出现的警告信息

RuoYi

2022-11-21 0effee74b176638329d6d378de44293219fd8de2

 src/views/system/user/profile/userAvatar.vue

@@ -1,9 +1,10 @@
<template>

  <div class="user-info-head" @click="editCropper()"><img :src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>

  <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">

    <el-row>

      <el-col :xs="24" :md="12" :style="{height: '350px'}">

        <vue-cropper

  <div class="user-info-head" @click="editCropper()">

    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />

    <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">

      <el-row>

        <el-col :xs="24" :md="12" :style="{ height: '350px' }">

          <vue-cropper

            ref="cropper"

            :img="options.img"

            :info="true"

@@ -11,51 +12,59 @@
            :autoCropWidth="options.autoCropWidth"

            :autoCropHeight="options.autoCropHeight"

            :fixedBox="options.fixedBox"

            :outputType="options.outputType"

            @realTime="realTime"

            v-if="visible"

        />

      </el-col>

      <el-col :xs="24" :md="12" :style="{height: '350px'}">

        <div class="avatar-upload-preview">

          <img :src="options.previews.url" :style="options.previews.img"/>

        </div>

      </el-col>

    </el-row>

    <br/>

    <el-row>

      <el-col :lg="2" :md="2">

        <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">

          <el-button size="small">

            选择

            <el-icon class="el-icon--right"><Upload /></el-icon>

          </el-button>

        </el-upload>

      </el-col>

      <el-col :lg="{span: 1, offset: 2}" :md="2">

        <el-button icon="Plus" size="small" @click="changeScale(1)"></el-button>

      </el-col>

      <el-col :lg="{span: 1, offset: 1}" :md="2">

        <el-button icon="Minus" size="small" @click="changeScale(-1)"></el-button>

      </el-col>

      <el-col :lg="{span: 1, offset: 1}" :md="2">

        <el-button icon="RefreshLeft" size="small" @click="rotateLeft()"></el-button>

      </el-col>

      <el-col :lg="{span: 1, offset: 1}" :md="2">

        <el-button icon="RefreshRight" size="small" @click="rotateRight()"></el-button>

      </el-col>

      <el-col :lg="{span: 2, offset: 6}" :md="2">

        <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>

      </el-col>

    </el-row>

  </el-dialog>

          />

        </el-col>

        <el-col :xs="24" :md="12" :style="{ height: '350px' }">

          <div class="avatar-upload-preview">

            <img :src="options.previews.url" :style="options.previews.img" />

          </div>

        </el-col>

      </el-row>

      <br />

      <el-row>

        <el-col :lg="2" :md="2">

          <el-upload

            action="#"

            :http-request="requestUpload"

            :show-file-list="false"

            :before-upload="beforeUpload"

          >

            <el-button>

              选择

              <el-icon class="el-icon--right"><Upload /></el-icon>

            </el-button>

          </el-upload>

        </el-col>

        <el-col :lg="{ span: 1, offset: 2 }" :md="2">

          <el-button icon="Plus" @click="changeScale(1)"></el-button>

        </el-col>

        <el-col :lg="{ span: 1, offset: 1 }" :md="2">

          <el-button icon="Minus" @click="changeScale(-1)"></el-button>

        </el-col>

        <el-col :lg="{ span: 1, offset: 1 }" :md="2">

          <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>

        </el-col>

        <el-col :lg="{ span: 1, offset: 1 }" :md="2">

          <el-button icon="RefreshRight" @click="rotateRight()"></el-button>

        </el-col>

        <el-col :lg="{ span: 2, offset: 6 }" :md="2">

          <el-button type="primary" @click="uploadImg()">提 交</el-button>

        </el-col>

      </el-row>

    </el-dialog>

  </div>

</template>



<script setup>

import "vue-cropper/dist/index.css";

import { VueCropper } from "vue-cropper";

import { uploadAvatar } from "@/api/system/user";

import useUserStore from "@/store/modules/user";



const store = useStore();

const userStore = useUserStore();

const { proxy } = getCurrentInstance();



const open = ref(false);

@@ -64,38 +73,38 @@


//图片裁剪数据

const options = reactive({

  img: store.getters.avatar, // 裁剪图片的地址

  img: userStore.avatar, // 裁剪图片的地址

  autoCrop: true, // 是否默认生成截图框

  autoCropWidth: 200, // 默认生成截图框宽度

  autoCropHeight: 200, // 默认生成截图框高度

  fixedBox: true, // 固定截图框大小 不允许改变

  outputType: "png", // 默认生成截图为PNG格式

  previews: {} //预览数据

});



/** 编辑头像 */

function editCropper() {

  open.value = true;

};

}

/** 打开弹出层结束时的回调 */

function modalOpened() {

  visible.value = true;

};

}

/** 覆盖默认上传行为 */

function requestUpload() {

};

function requestUpload() {}

/** 向左旋转 */

function rotateLeft() {

  proxy.$refs.cropper.rotateLeft();

};

}

/** 向右旋转 */

function rotateRight() {

  proxy.$refs.cropper.rotateRight();

};

}

/** 图片缩放 */

function changeScale(num) {

  num = num || 1;

  proxy.$refs.cropper.changeScale(num);

};

}

/** 上传预处理 */

function beforeUpload(file) {

  if (file.type.indexOf("image/") == -1) {

@@ -107,7 +116,7 @@
      options.img = reader.result;

    };

  }

};

}

/** 上传图片 */

function uploadImg() {

  proxy.$refs.cropper.getCropBlob(data => {

@@ -116,21 +125,21 @@
    uploadAvatar(formData).then(response => {

      open.value = false;

      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;

      store.commit("SET_AVATAR", options.img);

      userStore.avatar = options.img;

      proxy.$modal.msgSuccess("修改成功");

      visible.value = false;

    });

  });

};

}

/** 实时预览 */

function realTime(data) {

  options.previews = data;

};

}

/** 关闭窗口 */

function closeDialog() {

  options.img = store.getters.avatar;

  options.img = userStore.avatar;

  options.visible = false;

};

}

</script>



<style lang='scss' scoped>