Javascript Can'；t将blob上载到节点js后端_Javascript_Jquery_Html_Node.js

Javascript Can'；t将blob上载到节点js后端

javascript jquery html node.js

Javascript Can'；t将blob上载到节点js后端,javascript,jquery,html,node.js,Javascript,Jquery,Html,Node.js,从计算机的麦克风动态创建水滴。创建的blob没有问题。我曾尝试将其上载到后端，但files对象始终为空我尝试过各种形式的jQueryAjax、香草javascript和fetch。在后端，我尝试与express fileupload、multer和busboy合作 //frontend function that creates the upload upload.addEventListener("click", function(event){

从计算机的麦克风动态创建水滴。创建的blob没有问题。我曾尝试将其上载到后端，但files对象始终为空

我尝试过各种形式的jQueryAjax、香草javascript和fetch。在后端，我尝试与express fileupload、multer和busboy合作

//frontend function that creates the upload

    upload.addEventListener("click", function(event){
                  var xhr = new XMLHttpRequest();
                  xhr.onload = function(e) {
                      if (this.readyState === 4) {
                          console.log("Server returned: ", e.target.responseText);
                      }
                  };
                  console.log('blob is:',blob,' filename is:', filename);
                  let form = new FormData();
                  form.append('file-1', blob);

                  jQuery.ajax({
                      url: '/api/askjnj',
                      data: form,
                      cache: false,
                      contentType: false,
                      processData: false,
                      method: 'POST',
                      type: 'POST', // For jQuery < 1.9
                      success: function(data){
                          alert(data);
                      }
                  });

              })


//backend route code
const express       = require('express')
const router        = express.Router()
const db            = require('../database/publicdata')
const bodyParser    = require('body-parser')
const fileUpload    = require('express-fileupload')

router.use(bodyParser.json())
router.use(
  bodyParser.urlencoded({
    extended: false,
  })
)
router.use(fileUpload);

router.post('/askjnj',async(req,res)=>{
  console.log('request files:',req.files);
  console.log('req.body:', req.body);
  res.send("ok");
})

module.exports = router

我正在req.body中获取测试密钥，但req.files仍然为空。

检查此项：。看起来他们正试图做和你一样的事情

tl；dr使用

FormatData（）

将blob打包为正确的数据类型。

我能够编写一个可行的代码。希望它对你也有用

HTML（EJS）：

myview.ejs

<html>

<head>
  <title>File upload Node.</title>
</head>

<body>
  <button id='new-item'>BUTTON</button>

</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>

<script>
  function postItem() {
    let obj =
      'o' +
      '\nv -0.500000 -0.500000 0.500000' +
      '\nv 0.500000 -0.500000 0.500000' +
      '\nv -0.500000 0.500000 0.500000' +
      '\nvt 0.000000 0.000000' +
      '\nvt 1.000000 0.000000' +
      '\nvt 0.000000 1.000000' +
      '\nvn 0.000000 0.000000 1.000000' +
      '\nf 1/1/1 2/2/1 3/3/1';
    blob = new Blob([obj]);
    console.log(blob);
    let formData = new FormData();
    formData.append("files[]", blob, "test.wav");
    formData.append("test", "test");
    $.ajax({
      url: '/api/askjnj',
      type: 'POST',
      data: formData,
      success: function(data) {
        console.log(data);
      },
      error: function(err) {
        console.log(err);
      },
      cache: false,
      contentType: false,
      processData: false
    });
  } //postItem()

  $('#new-item').on('click', function() {
    postItem();
  });
</script>

</html>

命令：

node myview.js

谢谢。我还有几件事要尝试。我在找的时候没抓到那个。我一开始工作就给你投票。现在就试试这个。谢谢你的洞察力

<html>

<head>
  <title>File upload Node.</title>
</head>

<body>
  <button id='new-item'>BUTTON</button>

</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>

<script>
  function postItem() {
    let obj =
      'o' +
      '\nv -0.500000 -0.500000 0.500000' +
      '\nv 0.500000 -0.500000 0.500000' +
      '\nv -0.500000 0.500000 0.500000' +
      '\nvt 0.000000 0.000000' +
      '\nvt 1.000000 0.000000' +
      '\nvt 0.000000 1.000000' +
      '\nvn 0.000000 0.000000 1.000000' +
      '\nf 1/1/1 2/2/1 3/3/1';
    blob = new Blob([obj]);
    console.log(blob);
    let formData = new FormData();
    formData.append("files[]", blob, "test.wav");
    formData.append("test", "test");
    $.ajax({
      url: '/api/askjnj',
      type: 'POST',
      data: formData,
      success: function(data) {
        console.log(data);
      },
      error: function(err) {
        console.log(err);
      },
      cache: false,
      contentType: false,
      processData: false
    });
  } //postItem()

  $('#new-item').on('click', function() {
    postItem();
  });
</script>

</html>

var express = require('express');
var app=express();

//var router = express.Router();
const multer = require('multer');
const upload = multer();
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
    console.log('marhaba');
    res.render('myview', {});
});



app.post('/api/askjnj', upload.any(), (req, res) => {
    console.log('Here');
    console.log('Files: ', req.files);
    res.send('ok');
});
app.listen(3000, function () {
    console.log("Working on port 3000");
});