Images uploaded by Express under NodeJS cannot get the returned data before demo

  node.js, question

The front-end code is as follows:

<!  DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 < title > < percentage = title percentage > < /title >
 
 <!  -- Bootstrap -->
 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link href="/stylesheets/fileinput.min.css" rel="stylesheet">
 
 <!  --[if lt IE 9]>
 <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <!  [endif]-->
 </head>
 <body>
 <!  -subject->
 <div class="container">
 <div class="row">
 <div class="col-md-12">
 <label class="control-label">Planets and Satellites</label>
 <input id="carouselUpload" name="carouselUpload" type="file" data-show-preview="false" multiple class="file-loading">
 </div>
 </div>
 </div>
 
 <!  -- jQuery Loading -->
 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <!  -- Bootstrap JS Loading -->
 <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <!  -- fileupload JS Loading -->
 <script src="/javascripts/fileinput.min.js"></script>
 <script src="/javascripts/fileinput_locale_zh.js"></script>
 <!  -- bootstrap fileinput config and callback function -->
 <script>
 $(document).on('ready', function() {
 $("#carouselUpload").fileinput({
 language: "zh",
 uploadUrl: "http://127.0.0.1:3000",
 allowedFileExtensions: ["jpg", "png", "gif", "jpeg"],
 uploadAsync: true
 });
 
 $('#carouselUpload').on('fileuploaded', function(event, numFiles, label) {
 console.log("change");
 });
 
 
 });
 </script>
 </body>
 </html>

Backstage:

var express = require('express');
 var router = express.Router();
 var formidable = require('formidable');
 var fs = require('fs');
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
 });
 
 router.post('/', function(req, res, next) {
 res.header( 'Content-Type','text/javascript;  charset=utf-8');  //Set the return string encoding
 var form = new formidable.IncomingForm();  //Create Object
 form.uploadDir = "./public/images/uploads/";  //Set the path where temporary files are stored
 form.encoding='utf-8';  //Set the encoding of uploaded data
 form.keepExtensions = true;  //Set whether to keep the extension name of uploaded files
 form.maxFieldsSize = 2 * 1024 * 1024;  //File Size
 
 form.parse(req, function(err, fields, files) {
 if (err) {
 res.render('index', { title: err });
 return;
 bracket
 
 console.log(files);
 
 var extName = '';  //Filename extension
 switch (files.carouselUpload.type) {
 case 'image/pjpeg':
 extName = 'jpg';
 break;
 case 'image/jpeg':
 extName = 'jpg';
 break;
 case 'image/png':
 extName = 'png';
 break;
 case 'image/x-png':
 extName = 'png';
 break;
 case 'image/gif':
 extName = 'gif';
 break;
 bracket
 
 if(extName.length == 0){
 Res.send ('Error in Uploading File Type!'  );
 return;
 bracket
 
 Parse (newdate ()) plus'.' plus extName;
 Uploaddir plus avatarName;
 
 console.log(newPath);
 fs.renameSync(files.carouselUpload.path, newPath);  //Rename
 
 res.send(avatarName);
 });
 });
 
 module.exports = router;

Upload can be completed normally without any error prompt. You can also see the return information from chrome’s inside. The return of the finally bound fileuploaded Event to inside can never get anything. However, it is strange that if this event is change, it can be triggered normally!

The problem has been solved. The original server res.send (return data) inside, the front-end FILENPUT can only process json format results, and in PHP inside json_encode is also used to wrap the returned data. Now the node end can trigger FILENPUT’s fileuploaded event by making the string result into json format returns.