Ajax将有效数据发送为null

时间:2019-05-31 16:32:59

标签: javascript ajax

我正在使用Uppy来上传文件,而laravel则是后端

我的问题是它无法正确发送具有正确值的所有数据。它以title的形式发送tagdescriptionnull,但发送了其他数据正确。也就是说,在laravel中,当我运行dd($request->all())时,它返回的内容如下:

array:7 [
  "name" => "boss.jpg"
  "type" => "image"
  "size" => "7329"
  "title" => null
  "description" => null
  "tags" => null
  "files" => array:1 [
    0 => UploadedFile {#344
      -test: false
      -originalName: "boss.jpg"
      -mimeType: "image/jpeg"
      -error: 0
      #hashName: null
      path: "C:\xampp\tmp"
      filename: "php962E.tmp"
      basename: "php962E.tmp"
      pathname: "C:\xampp\tmp\php962E.tmp"
      extension: "tmp"
      realPath: "C:\xampp\tmp\php962E.tmp"
      aTime: 2019-05-31 16:30:46
      mTime: 2019-05-31 16:30:46
      cTime: 2019-05-31 16:30:46
      inode: 0
      size: 7329
      perms: 0100666
      owner: 0
      group: 0
      type: "file"
      writable: true
      readable: true
      executable: false
      file: true
      dir: false
      link: false
      linkTarget: "C:\xampp\tmp\php962E.tmp"
    }
  ]
]

您可以看到除titledescriptiontags以外的所有数据都发送正确的值

这是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">

<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Simple Dashboard</title>

<link rel='stylesheet' href='https://transloadit.edgly.net/releases/uppy/v0.29.1/dist/uppy.min.css'>

<!--del later-->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"/>
<!--del-->
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
<style>
#extraData{
margin-left:5%;
}
</STYLE>
</head>
<body translate="no">
<div id="drag-drop-area">@csrf <!-- {{ csrf_field() }} -->


</div>
<div class="form-group d-none w-50 m-20" id='extraData' >
  <label for="title">Title:</label>
  <input type="text" class="form-control" id="title"><br>
  <label for="description">Description:</label>
  <textarea class="form-control" rows="5" id="description"></textarea><br>
  <label for="tags">Tags:</label>
  <input type="text" class="form-control" id="tags"><br>
</div>


<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>

<script src='https://transloadit.edgly.net/releases/uppy/v0.29.1/dist/uppy.min.js'></script>
<script id="rendered-js">
      const uppy = Uppy.Core({ autoProceed: false });
      const XHRUpload = Uppy.XHRUpload;

uppy.use(Uppy.Dashboard, { target: '#drag-drop-area', inline: true, height: 450 });
uppy.use(XHRUpload, {
  endpoint: '/upload',
  headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
  meta: {
        title: 'John',
        description:'good',
        body:'ghfgf',
        tags:'dfgdgd',
        type:'img'
      },
    // metaFields: [meta]
})

uppy.on('file-added', (file) => {
 $('#extraData').removeClass('d-none');
  uppy.setFileMeta(file.id, {
    size: file.size,
        title: $('#title').val(),
        description:$('#description').val(),
        tags:$('#tags').val(),
        type:"image"
      },
  )
})


      //# sourceURL=pen.js
    </script>
<script src="https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js"></script>
</body>
</html>

非常感谢

0 个答案:

没有答案