el-upload 手动上传

`el-upload` 是 Element UI 提供的一个用于文件上传的功能组件，它支持多种上传方式，包括手动选择文件、拖拽上传以及API触发的自动上传。手动上传通常是在用户点击“浏览”按钮后，从本地选取文件提交给服务器。

在 Vue 中，你可以像下面这样使用 `el-upload` 进行手动上传：

<template>
  <el-upload
    :action="uploadUrl" // 上传地址
    :on-change="handleChange" // 文件变化事件
    :before-upload="beforeUpload" // 上传前的钩子，可以验证文件等
    @success="handleSuccess" // 上传成功的回调
    @error="handleError" // 上传失败的回调
  >
    <el-button slot="trigger">选择文件</el-button>
    <el-progress :percentage="uploadProgress" /> <!-- 可选，显示上传进度条 -->
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-server-url', // 替换为实际的服务器接口地址
      uploadFile: null,
      uploadProgress: 0, // 初始化上传进度为0
    };
  },
  methods: {
    handleChange(file) {
      this.uploadFile = file; // 保存即将上传的文件信息
    },
    beforeUpload(file) {
      // 对文件做进一步处理，如限制文件大小、类型等
      if (file.size > 1024 * 1024 * 5) { // 限制文件不超过5MB
        message.error('文件过大');
        return false;
      }
      return true;
    },
    handleSuccess(response, file) {
      console.log('文件上传成功', response, file);
    },
    handleError(err, file) {
      console.error('文件上传失败', err, file);
    },
  },
};
</script>