vue项目使用simple-uploader进行携带参数进行文件和文件夹上传

本文链接：https://blog.youkuaiyun.com/outlierQiqi/article/details/106538216

介绍：由于element的el-upload不支持文件夹上传，所以用了vue-simple-uploader，实现了文件夹/文件的携带form data 和 headers参数上传。vue-simple-uploader还能用于切分上传、断续上传，此处项目没有用到。

想对上传做更多的处理的小伙伴，推荐去看源码。

另：以下代码加了文件列表的拖拽。

1、安装：npm install vue-simple-uploader --save

在main.js里加上：

import uploader from 'vue-simple-uploader'

Vue.use(uploader)

2、

    <uploader
          ref="uploader"
          :options="options"
          :autoStart="false"
          @file-added="onFileAdded"
          @file-success="onFileSuccess"
          @file-progress="onFileProgress"
          @file-error="onFileError"
          @class="uploader-app"
        >
          <uploader-unsupport></uploader-unsupport>
          <uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadBtn">{
  {$t('imgUpload.file')}}</uploader-btn>
          <uploader-btn :directory="true">{
  {$t('imgUpload.folder')}}</uploader-btn>
          <uploader-list v-show="panelShow">
            <div id="filePanel" 
              v-drag
              draggable="false"
              class="file-panel"
              :class="{'mini': collapse}"
              slot-scope