Блог

Я новичок в loopback, и у меня есть форма, в которой есть несколько полей для загрузки файла. теперь я могу сохранять значения полей, используя PersistedModel с базой данных mysql.

Я хочу сохранить загруженный файл также в каком-либо месте.как это сделать, кто-нибудь может объяснить на примере. Я видел документацию по хранилищу 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="example@gmail.com" 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>
  

Используйте express.js with multer для простой загрузки файлов и вставки базы данных.

Мультер — это node.js промежуточное программное обеспечение для обработки multipart/form-data , которое в основном используется для загрузки файлов. Он написан поверх 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>
  

У меня также есть похожая реализация, проверьте это

Однако вам необходимо указать контейнер для хранения, который вы используете, в источниках данных.файл json Вот моя реализация соединителя хранилища.

 localstorage: {
    "name": "localstorage",
    "connector": "loopback-component-storage",
    "provider": "filesystem",
    "root": "./files/",
    "nameConflict": "makeUnique",
    "maxFileSize": "104857600"
}
  

и в model-config.json добавьте это:

 "Container": {
    "dataSource": "localstorage",
    "public": true
},
  

также не забудьте добавить Container.json в папку common / models, которая будет выглядеть следующим образом:

 {
   "name": "Container",
   "base": "Model"
}
  

Теперь вы сможете размещать файлы по пути «/ api / container»