Question

我想将图像发送到服务器

我的代码在Chrome 77.0.3865.90版中运行完美

但是

在Mozilla（版本69.0.1）中，POST方法更改为GET并出现此错误

表单包含文件输入，但缺少表单上的method = POST和enctype = multipart / form-data。该文件将不会发送。

请求方法：GET

状态码：200

<form class="form-horizontal" id="form" >

<div class="col">
 <label for="images" class="control-label">image</label>
 <input type="file" class="form-control" name="images" id="images" >
</div>

<div class="form-group row">
   <div class="col">
        <button type="submit" class="btn btn-danger">Send</button>
   </div>
</div>

</form>

<script>
document.getElementById('form').addEventListener('submit' , async function(event) {

let images = document.querySelector('input[name="images"]');

let formData = new FormData();

formData.append('images' , images.files[0] );

try {
         const response = await fetch('http://exampleurl.com/profile', {

             method: 'POST',
             headers: {
               'X-Requested-With': 'XMLHttpRequest',
               'X-CSRF-Token': "<%= req.csrfToken() %>",
             },
             body: formData,
             credentials: 'same-origin'
             });
             } catch (error) {
               console.error(error);
    }
    })

</script>

我无法在表单中使用方法=“ POST”和enctype =“ multipart / form-data”，因为 csrf令牌无法在具有multipart / form-的表单中实现数据编码

Answer 1

我怀疑您的表格可能要提交两次。

1）AJAX事件处理程序 2）表单中的“提交”按钮实际上是通过html发布表单的

尝试将事件处理程序添加到表单本身，而不是添加提交按钮。在那里，您可以阻止表单执行其所需的操作，因此只有您的AJAX请求会通过。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

我想获取formData时将POST转换为GET？

1 个答案: