loopback 3文件存储连接器

Question

我是环回的新手，我有一个表格，其中有一些文件上传的字段。现在我可以使用带有mysql数据库的PersistedModel存储字段值。

我想在某些地方也保存文件上传。如果这样做，任何人都可以用例子来解释。我已经看过loopback 3存储文档，但我无法得到。我使用dropzone js进行文件上传。这是我的代码

<form  id="myForm" novalidate>
   <div class="form-row">
      <div class="form-group col-md-6">
         <input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" required>
      </div>
   </div>
   <div class="form-row">
      <div class="form-group col-md-6">
         <input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" required>
         <div class="invalid-feedback">Please Enter a Valid Email Id.</div>
      </div>
      <div class="form-group col-md-6">
         <input type="text" id="role" name="role" class="form-control" placeholder="Job Role" >
      </div>
   </div>
   <div class="form-row">
      <div class="form-group col-md-12">
         <textarea class="form-control" id="message" name="message" placeholder="Message" required></textarea>
      </div>
   </div>
   <div id="resume" class="dropzone form-control"></div>
   <input type="submit" class="btn btn-primary mt-10" id="item-submit" value="submit">
</form>

脚本

<script type='text/javascript'>
   $("#myForm").submit(function(e) {
      e.preventDefault();
      var parms = {
   firstname : $("#firstname").val(),
   email : $("#email").val(),
   role : $("#role").val(),
   message: $("#message").val()
   };
   $.ajax({
   method: 'POST',
   url:  "http://localhost:3000/api/careers",
   async: false,
   dataType : "json",
   contentType: "application/json; charset=utf-8",
   data: JSON.stringify(parms),
   success: function(data){
   console.log('Submission was successful.');
   // location.reload();
   console.log(data);
   }, error: function (data) {
      console.log('An error occurred.');
      console.log(data);
         },   
      })
   });
</script>

Answer 1

使用express.js和multer轻松上传文件并插入数据库。

Multer是一个用于处理multipart/form-data的node.js中间件，主要用于上传文件。它写在busboy之上，以实现最高效率。

安装express和multer

npm install --save multer
npm install --save express

---

app.js在后端

const express = require('express')
const path = require('path')
const multer = require('multer');

const port = 3000

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
})

const upload = multer({ storage: storage })
const app = express()

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/index.html'))
})

app.post('/upload', upload.single('avatar'), function (req, res, next) {

    var fileName = req.file.originalname

    // Do your database operations here
    console.log(fileName)

    res.send(req.file)
})

app.listen(port, () => console.log(`App listening on port ${port}!`))

index.html在前端

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="avatar" />
    <input type="submit" value="Upload">
</form>