element plus 图片上传简洁版

xxx谢

已于 2024-03-20 10:56:20 修改

阅读量178

点赞数 1

文章标签： vue.js javascript elementui

于 2023-10-12 11:41:52 首次发布

本文链接：https://blog.csdn.net/m0_72220359/article/details/133787400

版权

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <span>更换头像</span>
      </el-header>
      <el-main>
        <div class="fm">
          <!-- v-model:file-list="fileList" -->
          <el-upload
            ref="uploadRef"
            class="avatar-uploader"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="onSelectFile"
          >
            <img v-if="ImageUrls" :src="ImageUrls" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"></el-icon>
          </el-upload>
          <el-button
            type="primary"
            :icon="Plus"
            size="large"
            @click="uploadRef.$el.querySelector('input').click()"
            >选择图片</el-button
          >
          <el-button
            type="success"
            :icon="Upload"
            size="large"
            @click="uploadings"
            >上传图片</el-button
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, defineEmits } from "vue";
import { getuser, edituserimg } from "@/api/user";
// 这里是请求的方法
import { ElMessage } from "element-plus";
//引入element plus
import { Plus, Upload } from "@element-plus/icons-vue";
//引入element plus icon图标
const emit = defineEmits(["submitForm"]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const ImageUrls = ref("");
const uploadRef = ref("");

// 文章封面
const onSelectFile = (uploadFile) => {
  // ImageUrls.value = URL.createObjectURL(uploadFile.raw);
  const reader = new FileReader();
  reader.readAsDataURL(uploadFile.raw);
  reader.onload = () => {
    ImageUrls.value = reader.result;
  };
};

// 获取基本资料
const logins = async () => {
  let res = await getuser();
  ImageUrls.value = res.data.user_pic;
};
logins();

// 上传图片
const uploadings = async () => {
  let res = await edituserimg({
    avatar: ImageUrls.value,
  });
  console.log(res);
  if (res != undefined) {
    ElMessage({
      message: "头像更新成功",
      type: "success",
    });
    logins();
    let editok = "ok";
   // 上传成功后  返回给父组件  然后父组件获取到就重新获取数据
    emit("submitForm", editok);
  } else {
    ElMessage.error("请求超时了|图片过大");
  }
};
</script>

<style scoped>
.el-main {
  height: 100vh;
  background-color: #fff;
  border: 1px solid #e4e7ed;
}

.el-header {
  line-height: 60px;
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-bottom: 0;
}

.el-upload-list,
.fm {
  width: 278px;
  height: 278px;
}

.el-icon {
  width: 280px;
  height: 280px;
  border: 1px dashed #ccc;
}

.el-upload img {
  width: 280px;
  height: 280px;
  border-radius: 8px;
  border: 1px dashed #ccc !important;
}

.el-button {
  position: relative;
  width: 118px;
  height: 40px;
  margin-top: 20px;
}
</style>