上傳文件及文件夾

實現效果：

 

 想要實現可以上傳文件和文件夾這個操作，

 

實現代碼：

1.html:

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :http-request="modeUpload">
  <el-button size="small" type="primary">選擇文件</el-button>
</el-upload>

<el-button size="small" type="primary" @click="chooseFiles">選擇文件夾</el-button>
<div v-show="false">
  <input type="file" id="file" ref="file" webkitdirectory directory multiple="multiple" v-on:change="handleFileUpload($event)" />
</div>

2.data:

modeList: '',

3.methods:

//選擇文件
modeUpload: function(item) {
  this.modeList = item.file;
},

//觸發文件夾選擇
chooseFiles(e){
  document.getElementById('file').click();
},

//選擇文件夾
handleFileUpload(event){
  this.modeList = document.getElementById("file").files;
},

4.上傳：

let formData = new FormData();

// 把文件信息添加進如對象
formData.append('file', this.modeList);

 

注意：

1.選擇了文件夾后，默認選擇了該文件夾下的所有文件。