Uppy документ не определен node.js - PullRequest
Новая
       26

Uppy документ не определен node.js

0 голосов
/ 29 марта 2020

Я пытаюсь внедрить программу загрузки файлов на мой сайт, но когда я пытаюсь включить ее, я получаю сообщение об ошибке, в котором говорится, что документ не определен. Это уже я использую browserify, чтобы включить его на моей стороне клиента. Тем не менее, я не уверен, что я делаю не так. Любая помощь будет признательна. Мой код ниже. К вашему сведению, я использовал IntelliJ Idea от Jet Brains в качестве своей 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.e js

<!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 для включения кода из uppy. js с помощью browserify. Я использовал пакет cli browserify. js -o. 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))

1 Ответ

0 голосов
/ 29 марта 2020

Я на 100% только догадываюсь, потому что я не вижу полный код / ​​репо и полную трассировку стека ошибки, но похоже, что вы ссылаетесь на document в Node.js коде, и именно это выдает эту ошибку , document - это то, что находится в DOM браузера и на него может ссылаться только код пользовательского интерфейса. Важно понимать разницу между вашим кодом Node / Express, который является внутренним сервером, и кодом вашей презентации / UI, который отображается в браузере.

...