element上传图片前后端

### 使用 Element UI 实现图片上传从前端到后端的完整流程

#### 创建 Vue 组件并引入 Element UI

为了实现图片上传功能，首先需要创建一个 Vue 组件，并确保已经安装了 `element-ui` 库。

import { ElUpload, ElButton } from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default {
  components: {
    ElUpload,
    ElButton
  },
  data() {
    return {
      imageUrl: ''
    }
  }
}

#### 配置文件上传组件

通过配置 `el-upload` 组件来指定上传的目标 URL 和其他参数。这里假设服务器接口地址为 `/api/upload`[^1]。

<template>
  <div class="upload-demo">
    <el-upload
      class="avatar-uploader"
      action="/api/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

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

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

#### 处理上传成功后的回调函数

当图片上传完成后，服务端会返回图片的相关信息（如访问链接），此时可以通过设置响应处理逻辑更新视图中的图像路径。

methods: {
  handleAvatarSuccess(res, file) {
    this.imageUrl = URL.createObjectURL(file.raw);
    console.log('Server response:', res); // 可能包含实际存储位置或其他元数据
  },

  beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
      this.$message.error('仅支持 JPG 格式的图片!');
    }

    if (!isLt2M) {
      this.$message.error('图片大小不得超过 2MB!');
    }

    return isJPG && isLt2M;
  }
}

#### 展示已上传的图片列表

对于多张图片的情况，可以利用循环渲染的方式展示每一张图片，并提供预览功能[^2]。

<div>
  <!-- 图片展示 -->
  <el-image 
    style="width: 200px; margin-right: 20px;"
    v-for="(val, index) in imageList"
    :key="index"
    :src="val.showUrl"
    :preview-src-list="[val.src]"
  />
</div>

上述代码片段展示了如何使用 Element UI 完成从选择本地图片、验证格式和尺寸到最后提交给服务器以及显示上传成功的图片的过程。