Question

我正在将Uppy用作客户端上传系统的js库

一切正常，除了我似乎无法使用jQuery或Javavascript作为meta来获取输入字段的值。

即：title:'hey',有效，但description:$('#description').val(),无效，但它只发送一个空值。而且我的服务器不应该接受空值。

在下面的代码中，唯一发送的非空值的metaFields是'title and image fields not the desction tags和body`字段。请帮助

这是我的代码：

<!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' >
  <form id ='ExtraForm'>

  <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>
</form>
</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')
    },

    // metaFields: [meta]
})
uppy.on('file-added', (file) => {
  var v = document.getElementById('title').value;

 $('#extraData').removeClass('d-none');
  uppy.setFileMeta(file.id, {
    size: file.size,
        title:'hey',
        description:$('#description').val(),
        tags:$('#tags').val(),

        body: v,

        type:"image"
      },
  )
})


      //# sourceURL=pen.js
    </script>

Answer 1

您应该在Uppy.Core中使用meta发送表单数据值。例如：

$description = $('#description').val()
Uppy.Core({

        meta: {
            description: $description,
            title : 'hey'
        },

Uppy不发送表单数据

1 个答案: