方法1：jq
import $ from 'jquery'
<form
id="frm-reg"
:action="actionUrl"//上传地址
method="post"
webkitdirectory
accept="multipart/form-data"
enctype="multipart/form-data"
@submit.prevent="onSubmit123"//上传触发的方法
>
<!-- -->
<!-- html5支持选择文件夹上传 -->
<input
type="file"
name="folder"
multiple
webkitdirectory
>
<input
type="submit"
value="提交"
>
</form>
onSubmit123(){
var formData = new FormData($("#frm-reg")[0]);
$.ajax({
url: this.actionUrl,//上传文件的地址
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log('理想数据',data.data);
},
error: function(data) {
console.log(data);
}
});
},
方法2：axios
import axios from "axios"
<input
id="uFile"
style="width: 74px;"
type="file"
name="folder"
webkitdirectory
@change="onSubmit2($event)"
>
onSubmit2(e){
let param = new FormData() // 创建form对象
for(let i = 0;i<e.target.files.length;i++){
param.append('folder', e.target.files[i])//folder参数-可变
}
axios.post( this.actionUrl,param,{
'Content-type' : 'multipart/form-data'
}).then((res)=>{
console.log(res)
})
},
参考文章：http://blog.ncmem.com/wordpress/2023/12/21/vue%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%a4%b9-4/
欢迎入群一起讨论
