vue+element 上传文件及文件夹

有需求需要做一个上传压缩包及文件夹的需求，记性不好，记录一下。

HTML 使用的element的upload和form表单，dropdown下拉菜单

<div>
<el-col :span="24">
<el-form-item label="材料路径：" prop="fileName">
<el-col :span="21">
<el-input v-model="form.fileName" :readonly="true"></el-input>
</el-col>
<el-col :span="3" align="center">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
<i class="iconfont iconshangchuan upload-icon"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<div @click="emptyData">
<el-upload
class="project-upload"
ref="upload"
action=""
:multiple="false"
:auto-upload="false"
:on-change="handleChange"
:show-file-list="false"
accept=".skp, .3ds, .zip, .rar"
>
上传文件
</el-upload>
</div>
</el-dropdown-item>
<el-dropdown-item>
<div style="cursor: pointer" @click="emptyData">
<span class="upload-span">上传文件夹</span>
<input
title="上传"
class="upload-folder-input"
multiple=""
webkitdirectory=""
accept="*/*"
type="file"
@change="getFiles"
/>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-form-item>
</el-col>
<div class="uptypestyleclass">请上传后缀名为.zip或者文件夹</div>
</div>

<div class="btn-up-group-box">
<el-button class="active" @click="handleUpload('concessionFormRef')">确定</el-button>
<el-button @click="cancelUpdateplan">取消</el-button>
</div>

JS

// 全局定义变量
let currentfile = []

// 清空存放文件的数组及输入框文字
// this.form.fileName = '' form表单
// this.files data中定义

emptyData() {
currentfile = []
this.form.fileName = ''
this.files = []
},
// 存放文件的数组
handleChange(file, fileList) {
currentfile.push(file)
this.form.fileName = file.name
this.$set(this.form, 'fileName', file.name)
},

getFiles(e) {
// let formData = new FormData()
this.files = e.target.files || []
this.form.fileName = this.files.length
? this.files[0].webkitRelativePath.split('/')[0]
: ''
},


// 点击确定开始上传
// formName是判断使用哪一个表单数据
handleUpload(formName) {
let vm = this
this.$refs[formName].validate((valid) => {
if (valid) {
vm.loading = vm.$loading({
lock: true,
text: '正在上传...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)',
})
var formData = new FormData()
if (this.dialogType !== 'add') {
this.form = {
id: this.form.solutionPlanId,
name: this.form.name,
}
}
if (currentfile.length !== 0) {
currentfile.forEach((res) => {
formData.append('files', res.raw) // 文件对象 supplyUploadFile
})
formData.append('fileType', 1)
}
if (this.files.length !== 0) {
for (let i = 0; i < this.files.length; i++) {
formData.append('files', this.files[i])
}
formData.append('fileType', 2)
}
for (const i in this.form) {
if (i !== 'files' && i !== 'fileName') {
formData.append(i, this.form[i])
}
}
// 判断是新增还是编辑
if (this.dialogType === 'add') {
// 后台新增接口
addMyPlan(formData)
.then((res) => {
vm.loading.close()
if (res.success) {
this.$message.success('新增成功')
this.$parent.$parent.getMyPlanTree()
this.$parent.$parent.dialogVisible = false
}
})
.catch((err) => {
vm.loading.close()
})
} else {
// 后台编辑接口
editMyPlan(formData)
.then((res) => {
vm.loading.close()
if (res.success) {
this.$message.success('编辑成功')
this.$parent.$parent.getMyPlanTree()
this.$parent.$parent.dialogVisible = false
}
})
.catch((err) => {
vm.loading.close()
})
}
} else {
return false
}
})
},

// 点击取消时清空 新增 编辑的取消有些不同 看情况修改

cancelUpdateplan() {
this.currentStep = ''
this.$parent.$parent.dialogVisible = false
currentfile.length = 0
},

CSS

// 部分样式 按照自己需求更改
.project-upload {
text-align: center;
.iconfont {
font-size: 20px;
color: #f8d71c;
}
}

.upload-folder-input {
width: 100%;
position: absolute;
left: 0;
line-height: 30px;
opacity: 0;
}

 

参考文章：http://blog.ncmem.com/wordpress/2023/12/21/vueelement-%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%8f%8a%e6%96%87%e4%bb%b6%e5%a4%b9/

欢迎入群一起讨论