使用 vue js 和 axios 上传多个文件

Posted 2023-02-22

【中文标题】使用 vue js 和 axios 上传多个文件

【英文标题】：Upload multiple file with vue js and axios

【发布时间】：2019-06-28 10:06:38

【问题描述】：

我正在尝试使用 vuejs 和 axios 上传多个图像，但在服务器端我得到了空对象。我在标题中添加了 multipart/form-data 但仍然是空对象。

submitFiles() 
    /*
      Initialize the form data
    */
    let formData = new FormData();

    /*
      Iteate over any file sent over appending the files
      to the form data.
    */
    for( var i = 0; i < this.files.length; i++ )
      let file = this.files[i];
      console.log(file);
      formData.append('files[' + i + ']', file);
    

    /*`enter code here`
      Make the request to the POST /file-drag-drop URL
    */
    axios.post( '/fileupload',
      formData,
      
        headers: 
            'Content-Type': 'multipart/form-data'
        ,
      
    ).then(function()
    )
    .catch(function()
    );
  ,

HTML：

<form method="post" action="#" id="" enctype="multipart/form-data">
    <div class="form-group files text-center" ref="fileform">
        <input type="file"  multiple="multiple">
        <span id='val'></span>
        <a class="btn"  @click="submitFiles()" id='button'>Upload Photo</a>
        <h6>DRAG & DROP FILE HERE</h6>
    </div>

我的服务器端代码：

class FileSettingsController extends Controller

    public function upload(Request $request)
        return $request->all();
    

输出：

files: []
files: []
0: 

Console.log() 结果： File(2838972) name: "540340.jpg", lastModified: 1525262356769, lastModifiedDate: Wed May 02 2018 17:29:16 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 2838972, …

【问题讨论】：

你发现了吗？我有同样的问题

【参考方案1】：

您忘记使用$refs。将ref 添加到您的输入中：

<input type="file" ref="file" multiple="multiple">

接下来，像这样访问您的文件：

submitFiles() 

    let formData = new FormData();

    for( var i = 0; i < this.$refs.file.files.length; i++ )
        let file = this.$refs.file.files[i];
        formData.append('files[' + i + ']', file);
    

    axios.post('/fileupload', formData, 
        headers: 
            'Content-Type': 'multipart/form-data'
        ,
      
    ).then(function()
    )
    .catch(function()
    );
,

这应该可行。

【讨论】：

控制器中的dd($request->file('files')) 怎么样？你有什么输出？

array:1 [ 0 => UploadedFile #756 -test: false -originalName: "540340.jpg" -mimeType: "image/jpeg" -error: 0 #hashName: null path: "C:\xampp\tmp" filename: "php44C8.tmp" basename: "php44C8.tmp" pathname: "C:\xampp\tmp\php44C8.tmp" extension: "tmp" realPath: "C:\xampp\tmp\php44C8.tmp" aTime: 2019-02-04 16:32:27 mTime: 2019-02-04 16:32:27 type: "file" writable: true readable: true executable: false file: true dir: false link: false linkTarget: "C:\xampp\tmp\php44C8.tmp" ]

你明白了，现在你需要存储它们。

【参考方案2】：

如果有人想知道“我怎样才能用它发送数据”，你去吧：

formData.append('name[' + this.name + ']', name);
formData.getAll('files', 'name');