vue3 element-plus上传文档

以下是使用 Vue3 和 Element Plus 实现文件上传的步骤：

1. 安装 Element Plus：在终端中运行以下命令安装 Element Plus。

   npm install element-plus --save

2. 引入 Element Plus：在 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'

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

3. 创建上传组件：在您的组件中创建一个上传组件，如下所示。

   <template>
     <el-upload
       class="upload-demo"
       action="//jsonplaceholder.typicode.com/posts/"
       :on-preview="handlePreview"
       :on-remove="handleRemove"
       :before-upload="beforeUpload"
       :on-exceed="handleExceed"
       :file-list="fileList"
       list-type="picture"
       :auto-upload="false">
       <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
       <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
       <div slot="tip" class="el-upload__tip">jpg/png 文件，不超过 500kb</div>
     </el-upload>
   </template>

   <script>
   export default {
     data() {
       return {
         fileList: []
       }
     },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
       },
       handlePreview(file) {
         console.log(file);
       },
       handleExceed(files, fileList) {
         this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
       },
       beforeUpload(file) {
         if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
           this.$message.error('上传文件只支持 jpeg/png 格式!');
           return false;
         }
         if (file.size > 500 * 1024) {
           this.$message.error('上传文件大小不能超过 500KB!');
           return false;
         }
       },
       submitUpload() {
         this.$refs.upload.submit();
       }
     }
   }
   </script>

在上面的代码中，我们使用了 Element Plus 的 el-upload 组件，该组件具有以下属性：

- `action`：上传地址，可以是一个 URL 或一个函数。
- `on-preview`：点击文件列表中已上传的文件时触发。
- `on-remove`：文件列表中移除文件时触发。
- `before-upload`：上传文件之前的钩子，可以用来校验文件的类型和大小等。
- `on-exceed`：文件超出个数限制时触发。
- `file-list`：已上传文件列表。
- `list-type`：文件列表的类型，支持 text、picture 和 picture-card。
- `auto-upload`：是否在选取文件后立即上传。

4. 实现上传逻辑：在组件中实现上传逻辑，如下所示。

   methods: {
     // ...
     submitUpload() {
       this.$refs.upload.submit();
     }
   }

在上面的代码中，我们实现了 `submitUpload` 方法，该方法通过 `$refs` 访问到上传组件的实例，然后调用 `submit` 方法触发上传操作。

5. 运行代码：在终端中运行以下命令启动应用程序。

   npm run serve

然后在浏览器中访问 http://localhost:8080，您将看到上传组件的界面。

希望这些步骤能帮助您实现文件上传功能。