vue3 elementplus文件上传

你好！使用 Element Plus 进行文件上传的方法如下：

1. 安装 Element Plus：在项目根目录下运行以下命令：

   npm install element-plus --save

2. 在 main.js 中引入 Element Plus：

   import { createApp } from 'vue'
   import App from './App.vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/lib/theme-chalk/index.css'

   const app = createApp(App)
   app.use(ElementPlus)
   app.mount('#app')

3. 在组件中使用 el-upload 组件进行文件上传：

   <template>
     <el-upload
       class="upload-demo"
       action="https://jsonplaceholder.typicode.com/posts/"
       :data="{foo: 'bar'}"
       :on-success="handleSuccess"
       :before-upload="beforeUpload"
       :file-list="fileList">
       <el-button size="small" type="primary">点击上传</el-button>
     </el-upload>
   </template>

   <script>
   export default {
     data() {
       return {
         fileList: []
       }
     },
     methods: {
       handleSuccess(response, file, fileList) {
         console.log(response, file, fileList);
       },
       beforeUpload(file) {
         console.log(file);
       }
     }
   }
   </script>

   <style>
   .upload-demo {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 180px;
   }
   </style>

在 el-upload 组件中，我们可以使用 action 属性指定文件上传的地址，data 属性指定上传时需要提交的数据，on-success 属性指定上传成功后的回调函数，before-upload 属性指定文件上传前的回调函数，file-list 属性指定已上传的文件列表。

在回调函数中，我们可以获取到上传成功后的响应数据 response，上传的文件 file，已上传的文件列表 fileList。