环回 3 文件存储连接器答案

【问题标题】：loopback 3 file storage connector环回 3 文件存储连接器
【发布时间】：2019-07-28 21:17:25
【问题描述】：

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

我也想将文件上传保存在某个位置。如何做到这一点任何人都可以举例说明。我已经看过环回 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>

【问题讨论】：

您想上传带有文本字段的文件并将它们存储到数据库中，同时将文件存储到您目录中的某个路径中吗？你想在 PHP/NodeJS 中使用 AJAX 还是普通的上传方式？
@Googlian 是的，我想存储字段值和文件
在 PHP 或 NodeJS 中？
NodeJS 只使用 loopback 3 作为后端
你的后端代码是什么？能不能把后端示例代码放上来

标签： jquery ajax loopbackjs strongloop loopback

【解决方案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>

【讨论】：

谢谢，但是使用 loopback3 是不可能的
可能，但它比这种方式更复杂，如果你愿意，你可以关注 loopback.io/doc/en/lb2/Storage-component.html
如果您觉得有帮助，请考虑采纳答案
我只需要与 loopback 3 一起使用。所以请帮帮我
你提到这个loopback.io/doc/en/lb2/Storage-component.html

【解决方案2】：

我也有类似的实现check this out

但是，您需要在 datasources.json 文件中指定您正在使用的存储容器这是我的存储连接器实现。

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

并在 model-config.json 中添加：

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

不要忘记在 common/models 文件夹中添加 Container.json，如下所示：

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

现在您可以将文件发布到“/api/container”路径

【讨论】：