Vue 文件上传功能

<div>
   <el-upload
          :action="upload.action"       // 设置上传的目标地址，即文件将被上传到的服务器地址
          :on-success="handleSuccess"   // 指定上传成功时的回调函数
          :file-list="fileList"         // 绑定一个数组变量fileList，用于显示已选择的文件列表        
                                           或上传成功的文件列表
          :headers="upload.headers"     // 设置上传请求的HTTP头部信息
                                        
          accept=".json"                // 限制只能选择类型为.json的文件
          multiple                      // 允许同时选择多个文件
          drag                          // 开启拖拽上传功能，即可以将文件拖拽到上传区域来进行 
                                           上传操作
        >
          <el-button size="small" type="primary">点击上传</el-button>
   </el-upload>
</div>

具体更多项目细节内容可以看element ui官网中关于上传文件的介绍：组件 | Element

1. 使用el-upload组件，并配置以下属性：

   • action：设置上传的目标地址，即文件将被上传到的服务器地址。
   • on-success：指定上传成功时的回调函数handleSuccess，用于处理上传成功后的逻辑。
   • file-list：绑定一个数组变量fileList，用于显示已选择的文件列表或上传成功的文件列表。
   • headers：设置上传请求的HTTP头部信息。

2. 使用accept属性来限制只能选择类型为.json的文件。

3. 使用multiple属性允许同时选择多个文件。

4. 使用drag属性开启拖拽上传功能，即可以将文件拖拽到上传区域来进行上传操作。

5. 在el-upload组件内部，放置一个el-button元素作为触发文件选择或拖拽上传操作的按钮。