<input type="file" id="file-id" name="file_name" onchange="theimage();">
这是我的上传按钮。
<input type="text" name="file_path" id="file-path">
这是一个文本字段，我必须在其中显示文件的完整路径。
function theimage(){
var filename = document.getElementById('file-id').value;
document.getElementById('file-path').value = filename;
alert(filename);
}
这是解决我的问题的JavaScript。但在警报值给我
C:\fakepath\test.csv
Mozilla给了我:
test.csv
但我想要本地完全限定文件路径。如何解决这个问题?
如果这是由于浏览器安全问题，那么应该采取什么替代方法来做到这一点?
当前回答
我发现，最好的解决方案是使用像Multer这样的中间件。下面是一个简短的概述:
npm i multer Add enctype="multipart/form-data" to your html form. In your backend dock where you're making your post request, require multer (const multer = require('multer')) In the same dock, set your upload destination: const upload = multer({dest:'uploas/'}). This will automatically create a local folder called 'uploads' where your files will be added. The code I've included shows you how to upload to your local disk storage. If you're using cloud storage (e.g. AWS, Azure, Cloudinary etc.) you can check out the Multer docs to see how to manage that. There aren't too many extra steps though. in your post request, add 'upload.single' (for one file) or 'upload.array' (for multiple files), like this:
路由器。Post ('/new'， upload.single('image')， async function(req, res) {//'image'应该是你在req.body中发送的输入的名称 Console.log (req.file) //注意，如果你使用的是'upload. log '。数组'，这个应该是'req。files' })；
要求的事情。文件将有一个完整的路径名称，您可以在您的post请求中使用。欲了解更多信息，请查看Multer文档:
https://www.npmjs.com/package/multer
我希望这能有所帮助!
其他回答
一些浏览器具有安全特性，可以防止JavaScript知道文件的本地完整路径。这是有道理的——作为客户端，您不希望服务器知道您本地机器的文件系统。如果所有浏览器都这样做就太好了。
如果你真的需要发送上传文件的完整路径，那么你可能不得不使用一些类似于signed java applet的东西，因为如果浏览器不发送它，就没有任何方法获得这些信息。
您至少可以在您的机器上获得文件路径的临时创建副本。这里唯一的条件是输入元素应该在表单中 你必须做的其他事情是在表单中放入一个属性enctype，例如:
<form id="formid" enctype="multipart/form-data" method="post" action="{{url('/add_a_note' )}}">...</form>
你可以在底部找到路径字符串。 它打开流文件，然后删除它。
我发现，最好的解决方案是使用像Multer这样的中间件。下面是一个简短的概述:
npm i multer Add enctype="multipart/form-data" to your html form. In your backend dock where you're making your post request, require multer (const multer = require('multer')) In the same dock, set your upload destination: const upload = multer({dest:'uploas/'}). This will automatically create a local folder called 'uploads' where your files will be added. The code I've included shows you how to upload to your local disk storage. If you're using cloud storage (e.g. AWS, Azure, Cloudinary etc.) you can check out the Multer docs to see how to manage that. There aren't too many extra steps though. in your post request, add 'upload.single' (for one file) or 'upload.array' (for multiple files), like this:
路由器。Post ('/new'， upload.single('image')， async function(req, res) {//'image'应该是你在req.body中发送的输入的名称 Console.log (req.file) //注意，如果你使用的是'upload. log '。数组'，这个应该是'req。files' })；
要求的事情。文件将有一个完整的路径名称，您可以在您的post请求中使用。欲了解更多信息，请查看Multer文档:
https://www.npmjs.com/package/multer
我希望这能有所帮助!
在Chrome/Chromium的应用程序，如electron，你可以只使用target.files:
(我在这个例子中使用React JS)
const onChange = (event) => {
const value = event.target.value;
// this will return C:\fakepath\somefile.ext
console.log(value);
const files = event.target.files;
//this will return an ARRAY of File object
console.log(files);
}
return (
<input type="file" onChange={onChange} />
)
我上面所说的File对象看起来是这样的:
{
fullName: "C:\Users\myname\Downloads\somefile.ext"
lastModified: 1593086858659
lastModifiedDate: (the date)
name: "somefile.ext"
size: 10235546
type: ""
webkitRelativePath: ""
}
如果你想获取路径，你可以获取fullName。
注意，这只适用于chrome/chromium浏览器，所以如果你不需要支持其他浏览器(比如你正在构建一个电子项目)，你可以使用这个。
