html:
<el-button type="warning" plain>
<a href="javascript:;" class="input-file input-fileup" >
<i class="iconfont icon-beike"></i>自动上传
<input class="fileUploaderClass" accept="*/*" type='file' name="file" webkitdirectory style="position: absolute;cursor: pointer;opacity: 0;left: 0;top: 0;width: 100%;height: 100%;" @change.stop="changesData"/>
</a>
</el-button>
js:
image.png
changesData (content) {
const loading = this.$loading({
lock: true,
text: '上传文件中,请稍等...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var formData = new FormData()
for (let i = 0; i < content.target.files.length; i++) {
let webkitRelativePath = content.target.files[i].webkitRelativePath //文件路径，看后台是否需要
formData.append(webkitRelativePath, content.target.files[i])
}
uploadFiles(formData).then(({data})=>{ //uploadFiles为请求接口方法,formData为参数
if(data && data.code === 0){
this.$message.success('上传成功')
loading.close()
}else if(data.code === 1) {
this.$alert(data.msg)
loading.close()
}else{
this.$message.error('文件上传失败，请联系系统管理员！')
loading.close()
}
})
},