如何通过快速生成器使用cropperjs

问题描述

我开始学习快递，现在我正在与express-generator合作， 我的老师给了我一个任务，就是上传图像，然后通过cropperjs库进行裁剪。我成功地通过express-fileupload库上传了图片，并使用File API在浏览器中显示了图片。但是express无法找到cropperjs并在终端上给我404，如下所示：

GET /node_modules/cropperjs/dist/cropper.css 404 8.675 ms - 1053
GET /node_modules/cropperjs/src/js/cropper.js 404 11.884 ms - 1053

甚至存在于package.json文件中！ 这是一些代码，可以帮助您为我提供更好的上下文

在我的文件upload.ejs中，我对cropperjs的引用如下：

      <!-- cropper -->
  <link href="../node_modules/cropperjs/dist/cropper.css" rel="stylesheet">
       <script src="../node_modules/cropperjs/dist/cropper.js"></script>

JavaScript for the front-end file.js：

// ********** canvas ****************
function getBoxCanvas(sourceCanvas) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width = sourceCanvas.width;
  var height = sourceCanvas.height;
  canvas.width = width;
  canvas.height = height;
  context.imageSmoothingEnabled = true;
  context.drawImage(sourceCanvas,width,height);
  return canvas;
}
// ****************************************

const fileSelect = document.getElementById("fileSelect"),fileElem = document.getElementById("fileElem"),fileList = document.getElementById("fileList");

fileSelect.addEventListener("click",function(e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
},false);

fileElem.addEventListener("change",handleFiles,false);

function handleFiles() {
  if (!this.files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    const list = document.createElement("ul");
    fileList.appendChild(list);
    for (let i = 0; i < this.files.length; i++) {
      const li = document.createElement("li");
      list.appendChild(li);

      const img = document.createElement("img");


      img.src = URL.createObjectURL(this.files[i]);
      img.onload = function() {
        URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      // *********cropper*************
      cropper = new Cropper(img);
      const btn = document.querySelector("button");
      const prev = document.getElementById("prev");
      btn.onclick = function () {
          const croppedCanvas = cropper.getCroppedCanvas();
          const BoxCanvas = getBoxCanvas(croppedCanvas);
          const croppedImage = document.createElement('img');
          croppedImage.src = BoxCanvas.toDataURL();
          prev.innerHTML = '';
          prev.appendChild(croppedImage);
      }
    }
  }
}

package.json：

{
  "name": "back-end","version": "0.0.0","private": true,"scripts": {
    "start": "nodemon ./bin/www"
  },"dependencies": {
    "cookie-parser": "~1.4.4","cropperjs": "^1.5.7","debug": "~2.6.9","ejs": "~2.6.1","express": "~4.16.1","express-fileupload": "^1.2.0","http-errors": "~1.6.3","morgan": "~1.9.1"
  }
}

app.js：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const fileUpload = require("express-fileupload");
const cropper = require("cropperjs");
// Routes
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
const uploadRouter = require("./routes/upload");//const holds the returned value of upload.js module


var app = express();

// 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')));
// default options for uploading file
app.use(fileUpload());

// Routes middleware
app.use('/',indexRouter);
app.use('/users',usersRouter);
app.use(uploadRouter);//uploading route

// catch 404 and forward to error handler
app.use(function(req,res,next) {
  next(createError(404));
});

// error handler
app.use(function(err,req,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;

对于后端upload.js：

const express = require('express');
const router = express.Router();


router.get("/upload",(req,res) => {
    res.render("upload")
});

router.post("/upload",res) => {
    console.log(req.files);

    if (!req.files) {
        return res.status(400).send('No files were uploaded.');
    }
    const sampleFile = req.files.sampleFile;
    sampleFile.mv("public/images/" + sampleFile.name,function (err) {
        if (err) {
            return res.status(500).send(err);
        }
        // res.send('File uploaded!');
        res.render("sucUploaded")
    });
});

module.exports = router;


 

所以我想念什么。任何帮助我都会非常感激！！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）