elementui 手动上传

要实现 ElementUI 的手动上传功能，你可以按照以下步骤进行操作：

1. 首先，在你的项目中引入 ElementUI 组件：

   import { Upload, Button } from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';

   export default {
     components: {
       Upload,
       Button
     },
     // ...
   }

2. 在模板中使用 Upload 组件和一个触发上传的按钮：

   <template>
     <div>
       <upload
         :action="uploadUrl"
         :on-success="handleUploadSuccess"
         :before-upload="beforeUpload"
       >
         <button type="button">点击上传</button>
       </upload>
     </div>
   </template>

3. 在 data 中定义上传文件的接口地址 `uploadUrl`，并在 methods 中编写上传成功的回调函数 `handleUploadSuccess` 和文件上传前的钩子函数 `beforeUpload`：

   <script>
   export default {
     data() {
       return {
         uploadUrl: '/your-upload-url'
       };
     },
     methods: {
       handleUploadSuccess(response, file) {
         console.log('上传成功', response, file);
         // 处理上传成功后的逻辑
       },
       beforeUpload(file) {
         console.log('上传前', file);
         // 处理上传前的逻辑
       }
     }
   }
   </script>

4. 在样式中添加一些样式来美化上传按钮（可选）：

   <style scoped>
   button {
     border: 1px solid #ccc;
     padding: 5px 10px;
     background-color: #f0f0f0;
     cursor: pointer;
   }
   </style>

以上是一个简单的手动上传的实现示例，你可以根据你的具体需求进行自定义。记得替换 `your-upload-url` 为你自己的上传接口地址。