elementplus手动上传图片

Element Plus 是 Vue 3 时代的 UI 框架，它基于 Element UI 进行了升级和优化。如果你想在 Element Plus 中手动上传图片，你可以使用它的 `el-upload` 组件。以下是基本步骤：

1. 引入组件：首先，在你的组件模板中引入 `ElUpload` 组件：

<template>
  <div>
    <el-upload
      :action="uploadUrl" // 图片上传地址
      ref="upload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
    >
      <!-- 或者直接绑定默认值 -->
      <el-button type="primary">点击选择图片</el-button>
    </el-upload>
  </div>
</template>

2. 定义方法：定义一些方法处理上传过程中的事件。例如，`beforeUpload` 钩子用于验证文件，`handleSuccess` 和 `handleError` 分别处理上传成功和失败的情况：

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-upload-api-url', // 图片上传的 API 接口 URL
    };
  },
  methods: {
    beforeUpload(file) {
      if (!file.type.match('image/*')) { // 只允许上传图片
        this.$message.error('只能上传图片!');
        return false;
      }
      const isLarge = file.size > 5 * 1024 * 1024; // 限制图片大小，这里假设5MB
      if (isLarge) {
        this.$message.warning('图片过大，请选择小于5MB的图片!');
        return false;
      }
      return true;
    },
    handleSuccess(response, file) {
      console.log('图片上传成功:', response);
      // 根据响应处理后续操作，如更新数据等
    },
    handleError(err, file) {
      console.error('图片上传出错:', err.message);
    },
  },
};
</script>