用Vue和Element Plus，轻松搞定文件上传下载！快来学习啦

别担心，要在网上传点东西或者下载点儿什么，咱们平时也常这么干！今天马上告诉你怎么用Vue和Element Plus轻松做到。首先得下载库，接着来导入Element Plus;接下来搞定上传文件这事儿；最后搞定下载。咱们抓紧时间，一起来学怎么弄！

一、安装和导入Element Plus

npm i element-plus -S

首先，装个叫做 ELEMENT PLUS 的东西，咱们才能开开心心地一起玩！就是在 VUE 项目那儿找到它，按照提示输入点命令就行了。别忘了，还得去 main.js 文件里写下几句代码，这样 ELEMENT PLUS 才能随时都能被我们用上~

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
createApp(App).use(ElementPlus).mount('#app');

二、文件上传

看样子咱得上点东西才能传上去呀。那果断弄个新Vue组件呗，然后把以前的代码拷进去打理下？别忘了，这次要用到Element Plus的上传功能。其他的随你折腾！

  

 
   选取文件
   上传到服务器
   
已选文件: {{ fileList }}
 
  


export default {
  data() {
 return {
   fileList: [], // 存储已选文件的列表
 };
  },
  methods: {
 handleChange(file, fileList) { // 选择文件时触发的方法
   this.fileList = fileList;
 },
 handleUpload() { // 上传文件方法
   // 发送上传文件请求
   // 当上传完成后的处理操作
 },
  },
};

三、文件下载

我们这儿还有个叫做Download.vue的组件！看看这边的小实验试试点一下那块儿的下载按钮，看看能否开始下载？这次用了特别的按钮，是Element Plus提供的哟。

看到那个代码了？跟着步骤走就能用Vue和Element Plus搞定文件上传下载！传文件时，要关注文件选择的动态变化，然后就可以愉快地开始上传过程啦；至于下载，只需轻轻一点按钮就行！

记得根据实际需求来设置上传下载功能哟。之前说到的上传下载请求只是例子实际上可能会有些不同喔！

  

 下载文件
  


export default {
  methods: {
 handleDownload() { // 下载文件方法
   // 发送下载文件请求
   // 当下载完成后的处理操作
 },
  },
};