使用 multipart/form-data 上传多个文件并在 Vue.js 中获取

Question

我一直致力于使用表单数据和获取（POST 请求）上传单个文件。但是，我遇到了上传多个文件的问题。以下是我的代码：

vue.js 的 HTML 部分：

<el-button @click="post_visible = true">POST</el-button>
      <el-dialog :visible.sync="post_visible" title="Adding a new value!"> 
                    <span>Image_1</span>
                    <input type="file" name="file1" />
                    <br>
                    <br>

                    <span>Image_2</span>
                    <input type="file" name="file2" />
                    <br>
                    <br>

                    <span>Image_3</span>
                    <input type="file" name="file3" />
                    <br>
                    <br>

                    <el-button @click = "submit"> Submit </el-button>

      </el-dialog>

Javascript 部分：

methods:{
submit(){

 var formData = new FormData();
 var fileField = document.querySelector("input[type='file']");

 console.log(fileField.files.length) // printing the length of the fileField.files. 

// attaching the files.
 formData.append('file', fileField.files[0]); 
 formData.append('file', fileField.files[1]); 
 formData.append('file', fileField.files[2]); 

const headers = new Headers();
            
headers.append('Authorization', 'Bearer '+ token); // tokenhas been initialized

const body = formData;
const init = {
method: 'POST',
headers,
body
};

fetch('http://*********/****', init)
.then((response) => {
return response.json(); // or .text() or .blob() ...
  })
 .then((text) => {
  // text is the response body
 })
  .catch((e) => {
// error in e.message
  });
}
}

我收到 500 错误（这是一个内部服务器错误）。服务器没有问题，因为我使用工具“AdvancedRestClient”成功地向 api 发出了（200）张贴请求。我意识到问题在于上传文件。当我打印出 fileField.files 的长度时，它是 1。它应该是 3，但我只得到 1。另外，我在网页上看到（在检查网页后），formdata 对象有仅包含 1 个文件，其他两个文件的值未定义。这意味着我在代码中搞砸了一些东西来上传多个文件。任何帮助确定我的错误或任何其他替代解决方案将不胜感激。

谢谢。

Answer 1

因为使用了选择器，你只能得到一个元素。

你应该使用document.querySelectorAll而不是document.querySelector

但请注意，document.querySelectorAll 返回节点列表/数组，然后您必须更改访问文件的方式。

问候 西蒙

提示： 请使用let 而不是var。

Answer 2

我已经解决了上述问题。做了一些代码更改。我没有使用 document.querySelector，而是使用了 document.getElementById('file1')。我对 html 文件和 javascript 代码进行了一些更改。这不是解决问题的理想方法或有效方法，但目前我有一个可行的解决方案。

vue.js 的 html 部分的变化是“name”字段更改为“id”字段。

                    <span>Image_1</span>
                    <input type="file" id="file1" />
                    <br>
                    <br>

                    <span>Image_2</span>
                    <input type="file" id="file2" />
                    <br>
                    <br>

                    <span>Image_3</span>
                    <input type="file" id="file3" />
                    <br>
                    <br>

javascript 文件中的更改：我使用 document.getElementById 代替 document.querySelector。

var formData = new FormData();
            
const fileField1 = document.getElementById('file1')
const fileField2 = document.getElementById('file2')
const fileField3 = document.getElementById('file3')

formData.append('file', fileField1.files[0]); // attaching the file
formData.append('file', fileField2.files[0]); // attaching the file
formData.append('file', fileField3.files[0]); // attaching the file

// the code for headers, fetch and POST reamins the same.

您也可以使用 document.getElementByName 来执行此操作。我只是更喜欢id（个人选择）。

这个解决方案对我有用。这不是解决问题的完美方法，因为如果要上传大量文件，这会使代码变得丑陋和乏味，但现在解决了我的问题。

如果有人对此问题提供有效的解决方案，将不胜感激。