首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Uppy文档未定义node.js

Uppy文档未定义node.js
EN

Stack Overflow用户
提问于 2020-03-29 05:10:52
回答 1查看 337关注 0票数 0

我正在尝试在我的网站中实现uppy文件上传程序,但是当我尝试包含它时,我得到了一条错误消息,告诉我文档没有定义。这已经是我使用browserify在我的客户端包含它了。然而,我不确定我做错了什么。任何帮助都将不胜感激。我的代码如下。仅供参考,我使用Jet Brains的IntelliJ Idea作为我的集成开发环境,并让集成开发环境生成我的节点js项目,因此它自动为我创建了一些包含路由的页面。

app.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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代码的地方)

代码语言:javascript
复制
// 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

代码语言:javascript
复制
<!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>

如您所见,通过使用browserify,我使用bundle.js合并了来自uppy.js的代码。我使用了cli browserify uppy.js -o bundle.js。老实说,我不知道我做错了什么,所以如果你能帮助我,我真的很感激。谢谢!

更新:在我的控制台上,我也得到了错误:

代码语言:javascript
复制
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))
EN

回答 1

Stack Overflow用户

发布于 2020-03-29 06:11:48

我在这里100%地猜测,因为我看不到错误的完整代码/代码库和完整堆栈跟踪,但听起来您在Node.js代码中引用了document,这就是引发此错误的原因。document是存在于浏览器DOM中的东西,并且只能由UI代码引用。理解Node/Express代码(即后端服务器)和表示/UI代码(即在浏览器中呈现的代码)之间的区别非常重要。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60907036

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档