el-upload 上传头像 vue3 js项目

在Vue 3项目中使用el-upload组件上传头像，你可以参考以下步骤和代码示例：

1. 安装Element Plus（如果你还没有安装）:

npm install element-plus --save

2. 在你的组件中引入el-upload和el-image组件：

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
    :file-list="fileList"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-image
    v-if="imageUrl"
    style="width: 100px; height: 100px"
    :src="imageUrl"
    fit="fill"></el-image>
</template>

3. 在script标签中，处理上传和移除的逻辑：

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const imageUrl = ref('');
const fileList = ref([]);
 
const handleSuccess = (response, file, fileList) => {
  imageUrl.value = URL.createObjectURL(file.raw);
};
 
const handleRemove = (file, fileList) => {
  imageUrl.value = '';
};
 
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    ElMessageBox.alert('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessageBox.alert('Image size can not exceed 2MB!');
  }
  return isJpgOrPng && isLt2M;
};
</script>

4. 在style标签中，添加样式（可选）：

<style>
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>

确保你的Vite配置或Webpack配置已正确设置以支持Element Plus和<script setup>特性。

这个例子中，el-upload组件用于上传图片，el-image组件用于展示上传的图片。beforeUpload方法用于检查文件类型和大小。handleSuccess和handleRemove方法处理上传成功和移除图片的逻辑。这个例子假设了一个简单的后端接口https://jsonplaceholder.typicode.com/posts/用于处理图片上传，实际项目中你需要替换为你的真实接口。