【发布时间】：2020-03-28 21:10:52
【问题描述】：
我正在尝试在我的网站中实现文件上传程序，但是当我尝试包含它时，我收到一条错误消息，指出该文档未定义。这已经是我使用 browserify 将它包含在我的客户端了。但是，我不确定我做错了什么。任何帮助将不胜感激。我的代码如下。仅供参考，我使用 Jet Brains 的 IntelliJ Idea 作为我的 IDE，我让 IDE 生成我的 node js 项目，所以它自动为我创建了一些包含路由的页面。
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
require('./uppy');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
uppy.js（这是我放置文档中的 uppy 代码的地方）
// Import the plugins
const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');
const Dashboard = require('@uppy/dashboard');
const uppy = Uppy()
.use(Dashboard, {
target: '#drag-drop-area',
inline: true
})
.use(XHRUpload, { endpoint: 'https://api2.transloadit.com' });
uppy.on('complete', (result) => {
console.log('Upload complete! We’ve uploaded these files:', result.successful)
});
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href="../node_modules/@uppy/core/dist/style.css" />
<link rel='stylesheet' href="../node_modules/@uppy/dashboard/dist/style.css" />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div id="drag-drop-area"></div>
<script src="../bundle.js"></script>
</body>
</html>
如您所见，我使用 bundle.js 通过 browserify 合并来自 uppy.js 的代码。我使用了 cli browserify uppy.js -o bundle.js。老实说，我不知道我做错了什么，所以如果你能帮助我，我真的很感激。谢谢！
更新：在我的控制台上，我也收到错误消息：
http://localhost:3000/node_modules/@uppy/core/dist/style.css (net::ERR_ABORTED 404 (Not Found))
http://localhost:3000/node_modules/@uppy/dashboard/dist/style.css (net::ERR_ABORTED 404 (Not Found))
http://localhost:3000/bundle.js (net::ERR_ABORTED 404 (Not Found))
【问题讨论】：
-
node_modules 是不可访问的，除非你通过 static 提供它，就像你对公共文件夹所做的那样，或者定义端点来代理 dist 文件等，尽管最好不要这样做，而是捆绑你的库，如docs，我认为您正在尝试使用 bundle.js 来执行此操作，但如果找不到，则不是 express 中的路由，也不是定义的公用文件夹中的路由，那么您需要找出捆绑器无法正常工作的原因。你在运行 browserify 时遇到了什么错误？ imo 提示，不要滚动你自己的 ejs 传统请求/响应。使用 react、vue、next、nuxt 等等，它的 2020 年