上传文件:
<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()
}
})
},