vue上传文件夹

方法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/

欢迎入群一起讨论