javascript - 文件上传缺少路径属性

Question

我在网上搜索了这个问题的答案，但没有运气。

我想将文件上传到运行 Node JS 的服务器，并将该文件保存在服务器端的任意文件夹中。

一切似乎都运行良好。

我的客户端 POST 代码(使用拖放):

var files = event.dataTransfer.files;

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

xhr.send(JSON.stringify(files));

服务器端 POST 处理程序:

app.post('/upload', function(req, res) {
    require('fs').rename(
        req.body.path,
        '/uploads' + serverPath,
        function(error) {
            if (error) {
                res.send({
                    error: 'Something bad happened!'
                });
                return;
            }

            res.send({
                path: serverPath
            });
        }
    );
});

但是服务器端代码失败。为什么？嗯，答案很简单。在我见过的大多数用例中，都会读入文件 path 属性。我发送到服务器的 POST 请求如下所示:

{
    webkitRelativePath: '',
    lastModified: 1429402697000,
    lastModifiedDate: '2015-04-19T00:18:17.000Z',
    name: 'sample.zip',
    type: 'application/zip',
    size: 317256
}

我无法让 Mac 上的 Chrome 创建 path 属性。有什么建议吗？

Answer 1

您可以在客户端使用此代码

 <form  name="myform" data-validate="parsley" enctype="multipart/form-data" method="post" action="http://<host>:<port number>/upload" target="upload">
 <input id="uploadImage" type="file" style="display:none" name="myFile" />
 <br/>  
 <a onclick="$('input[id=uploadImage]').click();">Select File</a>

   <input type="submit" id="submit_button"  value="Submit"/>
 </form>

在服务器端使用以下代码

安装这些模块并使用如下

  var multiparty = require('multiparty');
  var http = require('http')
  var util = require('util')
 var form = new multiparty.Form();
 form.parse(req, function(err, fields, files) {
        var fs = require('fs');
        fs.readFile(files.myFile[0].ws.path, function (err, data) {
             console.log("File data"+data);
             console.log("FileName--->"+files.myFile[0].ws.path);
        });

 });

在上面的代码中，您可以使用 ---> files.myFile[0].ws.path 获取文件名

并使用 -----> data 文件获取数据