RuoYi
2025-04-27 2f8a257efd2b64dc40666b0d332edb7824a9768d
src/views/system/user/profile/userAvatar.vue
@@ -59,17 +59,17 @@
</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";
import "vue-cropper/dist/index.css"
import { VueCropper } from "vue-cropper"
import { uploadAvatar } from "@/api/system/user"
import useUserStore from "@/store/modules/user"
const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const userStore = useUserStore()
const { proxy } = getCurrentInstance()
const open = ref(false);
const visible = ref(false);
const title = ref("修改头像");
const open = ref(false)
const visible = ref(false)
const title = ref("修改头像")
//图片裁剪数据
const options = reactive({
@@ -81,16 +81,16 @@
  outputType: "png",         // 默认生成截图为PNG格式
  filename: 'avatar',        // 文件名称
  previews: {}               //预览数据
});
})
/** 编辑头像 */
function editCropper() {
  open.value = true;
  open.value = true
}
/** 打开弹出层结束时的回调 */
function modalOpened() {
  visible.value = true;
  visible.value = true
}
/** 覆盖默认上传行为 */
@@ -98,58 +98,58 @@
/** 向左旋转 */
function rotateLeft() {
  proxy.$refs.cropper.rotateLeft();
  proxy.$refs.cropper.rotateLeft()
}
/** 向右旋转 */
function rotateRight() {
  proxy.$refs.cropper.rotateRight();
  proxy.$refs.cropper.rotateRight()
}
/** 图片缩放 */
function changeScale(num) {
  num = num || 1;
  proxy.$refs.cropper.changeScale(num);
  num = num || 1
  proxy.$refs.cropper.changeScale(num)
}
/** 上传预处理 */
function beforeUpload(file) {
  if (file.type.indexOf("image/") == -1) {
    proxy.$modal.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
    proxy.$modal.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。")
  } else {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      options.img = reader.result;
      options.filename = file.name;
    };
      options.img = reader.result
      options.filename = file.name
    }
  }
}
/** 上传图片 */
function uploadImg() {
  proxy.$refs.cropper.getCropBlob(data => {
    let formData = new FormData();
    formData.append("avatarfile", data, options.filename);
    let formData = new FormData()
    formData.append("avatarfile", data, options.filename)
    uploadAvatar(formData).then(response => {
      open.value = false;
      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;
      userStore.avatar = options.img;
      proxy.$modal.msgSuccess("修改成功");
      visible.value = false;
    });
  });
      open.value = false
      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl
      userStore.avatar = options.img
      proxy.$modal.msgSuccess("修改成功")
      visible.value = false
    })
  })
}
/** 实时预览 */
function realTime(data) {
  options.previews = data;
  options.previews = data
}
/** 关闭窗口 */
function closeDialog() {
  options.img = userStore.avatar;
  options.visible = false;
  options.img = userStore.avatar
  options.visible = false
}
</script>