elementui upload 手动上传

要实现Element UI的手动上传，需要使用Upload组件和对应的方法。以下是一个示例：

1. 在你的Vue组件中引入Upload组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-url"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

    <el-button type="primary" @click="upload">上传到服务器</el-button>
 </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      console.log(response, file, fileList);
    },
    beforeUpload(file) {
      // 验证文件格式、大小等
      console.log(file);
    },
    upload() {
      // 手动触发上传
      this.$refs.upload.submit();
    }
  }
}
</script>

<style>
.upload-demo {
  border: 1px dashed #409eff;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  color: #999;
}
</style>

2. 在`<el-upload>`标签中，设置`action`属性为你的上传接口地址，`on-success`为上传成功时的回调函数，`before-upload`为上传之前的验证函数，`auto-upload`设为`false`表示手动触发上传。

3. 在`<el-upload>`标签中，添加一个触发上传的按钮，这里使用了`<el-button>`。

4. 在`<el-upload>`标签内部的内容为用户选择文件后展示的内容，这里使用了一个提示信息。

5. 在Vue组件的`methods`中，编写了`handleSuccess`、`beforeUpload`和`upload`三个函数。

- `handleSuccess`函数是上传成功后的回调函数，可以在其中处理上传成功后的逻辑。参数`response`为服务器返回的数据，`file`为当前上传的文件对象，`fileList`为已上传的文件列表。
- `beforeUpload`函数用于在上传之前进行文件验证，例如验证文件格式、大小等。参数`file`为当前要上传的文件对象。
- `upload`函数用于手动触发上传，通过`this.$refs.upload.submit()`来提交上传请求。

注意：以上代码中使用了Element UI的样式类名和组件，确保你已经正确引入Element UI并设置了相应的样式。

希望对你有帮助！如果还有其他问题，请继续提问。