Javascript Multer中前端的自定义文件名

Javascript Multer中前端的自定义文件名,javascript,node.js,multer,Javascript,Node.js,Multer,我正在使用FormData上传一个文件,并使用Multer在服务器端接收它。一切都按预期工作,除了因为我在前端使用文件系统API,所以我上传的文件来自子目录。Multer似乎只看到文件名,即使在将文件附加到表单数据时显式设置了文件别名。看起来Multer在我的请求处理程序的其余部分之前执行它的逻辑,并且没有看到我在主体上设置的参数。我如何让穆特看到完整的路径 以下是我当前设置的简化版本: 客户端别名用路径表示全名,file.name是文件系统API自动设置的基本名称: function uplo

我正在使用FormData上传一个文件,并使用Multer在服务器端接收它。一切都按预期工作,除了因为我在前端使用文件系统API,所以我上传的文件来自子目录。Multer似乎只看到文件名,即使在将文件附加到表单数据时显式设置了文件别名。看起来Multer在我的请求处理程序的其余部分之前执行它的逻辑,并且没有看到我在主体上设置的参数。我如何让穆特看到完整的路径

以下是我当前设置的简化版本:

客户端别名用路径表示全名,file.name是文件系统API自动设置的基本名称:

function upload(file, alias) {
    let url = window.location.origin + '/upload';
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    xhr.open('POST', url, true);

    return new Promise(function (resolve, reject) {

        xhr.addEventListener('readystatechange', function(e) {
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(file.name);
            }
            else if (xhr.readyState == 4 && xhr.status != 200) {
                reject(file.name);
            }
        })

        formData.append('file', file, alias || file.name); // this should in theory replace filename, but doesn't
        formData.append('alias', alias || file.name); // an extra field that I can't see in multer function at all
        xhr.send(formData);
    });
}
服务器:


为了使其正常工作,请在配置multer时使用preservePath选项。以下工作将起作用:

但是,需要注意的是,multer不会创建目录或子目录。这些都必须事先创建。我也测试过这个。如果目录已创建且为空,则上载成功,但如果目录不存在,则上载失败

他们在报告中说: 注意:当作为函数提供目的地时,您负责创建目录。传递字符串时,multer将确保为您创建目录

该注释的后续内容是:您也负责创建任何子目录

上载文件的相对路径将可在originalname属性中访问。所以,后端看起来是这样的:正如您所拥有的,但带有更新的注释

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        // If you uploaded for example, the directory: myDir/myFile.txt,
        // file.originalname *would* be set to that (myDir/myFile.txt)
        // and myFile.txt would get saved to uploads/myDir
        // *provided that* uploads/myDir already exists.
        // (if it doesn't upload will fail)
        // /* if(  [ uploads/myDir doesn't exist ] ) { mkdir } */
        cb(null, file.originalname);
    }
});
有用提示: 在前端,我发现使用:tested On Chrome latest ok更容易测试目录/子目录上传

<form action="/uploads/multipleFiles" method="post" enctype="multipart/form-data">
      <input type="file" name="multiple" webkitdirectory accept="text/*" onchange="console.log(this.files)" />
      <input type="text" name="tester" value="uploadTester" />
      <input type="submit"/>
</form>

服务器上的req.body显示了什么?在multer中分配给filename字段的函数中,它是空的,在post请求中,它包含设置的别名,但在post请求处理程序启动时,该文件已使用原始名称写入磁盘。file.fieldname是否有可能使用别名设置?在文件名中:function{…}console.logfile.fieldname显示了什么?file.fieldname只是设置为file,不幸的是,我在前端第一个参数中将其设置为append。如果我是黑客,将其设置为我想要的名称,我不确定如何从upload.single调用中引用它。该文件来自表单,上面有多部分/表单数据集,multer已经正确处理了文件,只是没有看到我想将其重命名为的别名,我甚至可以确认内容是否正确,文件是否可以访问。
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        // If you uploaded for example, the directory: myDir/myFile.txt,
        // file.originalname *would* be set to that (myDir/myFile.txt)
        // and myFile.txt would get saved to uploads/myDir
        // *provided that* uploads/myDir already exists.
        // (if it doesn't upload will fail)
        // /* if(  [ uploads/myDir doesn't exist ] ) { mkdir } */
        cb(null, file.originalname);
    }
});
<form action="/uploads/multipleFiles" method="post" enctype="multipart/form-data">
      <input type="file" name="multiple" webkitdirectory accept="text/*" onchange="console.log(this.files)" />
      <input type="text" name="tester" value="uploadTester" />
      <input type="submit"/>
</form>