vue 上传文件/文件夹

上传文件：

<input type="file" multiple />

上传文件夹：

<input type="file" multiple directory mozdirectory webkitdirectory />

采用 simple-uploader 组件库，进行开发。

<div>
  <uploader-btn style="margin: 0 10px;">
    <template slot-scope="scope">
      <el-tag type="info" size="mini">选择文件</el-tag>
    </template>
  </uploader-btn>
</div>
<div>
  <uploader-btn :directory="true" style="margin: 0 10px;">
    <template slot-scope="scope">
      <el-tag type="info" size="mini">选择文件夹</el-tag>
    </template>
  </uploader-btn>
</div>  

无论是上传文件，还是上传文件夹，选择上传信息后，展示要上传的文件列表。

<uploader-files>
  <template slot-scope="filess">
    <div>
      <el-table :data="filess.files">
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="路径">
          <template slot-scope="scope">
            {{ scope.row.relativePath }}
          </template>
        </el-table-column>
        <el-table-column label="文件大小">
          <template slot-scope="scope">
            <uploader-file :file="scope.row" :list="false" :key="scope.index">
              <template slot-scope="kk">
                {{ kk.formatedSize }}
              </template>
            </uploader-file>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <uploader-file :file="scope.row" :list="false" :key="scope.index">
              <template slot-scope="kk">
                {{ fileStatusText[kk.status] }}
              </template>
            </uploader-file>
          </template>
        </el-table-column>
        <el-table-column label="进度">
          <template slot-scope="scope">
            <uploader-file :file="scope.row" :list="false" :key="scope.index">
              <template slot-scope="kk">
                <el-progress :text-inside="true" :stroke-width="18" :percentage="Math.floor(kk.progress*100)" color="rgba(142, 113, 199, 0.7)"></el-progress>
              </template>
            </uploader-file>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="danger" plain icon="el-icon-delete" @click="remove(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="control-container">
        <el-button size="small" type="primary" @click="resumes(filess.files)">全部上传</el-button>
        <el-button size="small" type="danger" @click="removeAll(filess.files)">全部取消</el-button>
      </div>
    </div>
  </template>
</uploader-files>

点击上传按钮，将文件信息循环一遍，append 到 new 出来的 FormData 中。

resumes (files){
  let formData = new FormData;
  files.forEach((e, index) =>{
    this.tempprog +=  e.size
    e.resume()    
    formData.append('files', e.file);
  })
  formData.append('project_id', this.projectInfo.id);
  formData.append('parent_id', this.parent_id);
  if(this.type == '上传文件'){
    this.uploadImg(formData)
  }else if (this.type == '上传文件夹'){
    this.uploadFolder(FormData)
  }
  this.uploadType = false
},

上传文件接口：

uploadImg(formData){
  this.$http({
    method:'post',
    url:"/rest/1.0/document/file/upload",
    data:formData,
    headers: {
      'Content-Type': 'multipart/form-data',
      "token":JSON.parse(localStorage.getItem('token'))
    },
  }).then(res=>{
    this.$message(res.data.error_message)
    if(res.data.error_code == 0){
      this.loadData()
    }
  })
},