Question

我有一个HTML：

form.html：

<form method="post" enctype="multipart/form-data" action="/"> 
    <input type="file" name="pic" id="imgupload">
</form> 

<script>
document.getElementById("imgupload").onclick = function({myFunction()};

function myFunction() {
   var fileUploadControl = $("#imgupload")[0];
   if (fileUploadControl.files.length > 0) {
      var file = fileUploadControl.files[0];
      var name = "photo.jpg";

      //how to pass this (parseFile) to server.js? 
      var parseFile = new Parse.File(name, file);
   }
}
</script>

和我的后端服务器代码使用express：

简化的server.js（仅限服务器路由）：

 app.get('/', (req, res) => {
    //loads the form.html from above. 
    res.sendFile(__dirname + "/form.html"); 
 })

 app.post('/', (req, res)=>{
      //once press submit button, will post parseFile to here
      //from here, i will save the parseFile to database. 
      res.status(204).end(); 
 })

我的目标是上传图片，然后当用户按下提交时，parseFile变量将被发送到server.js中的app.post（），在那里进行保存。

我已经尝试过multer，它对req.file中的Parse.File不起作用，即：

 app.post('/', upload, (req,res)=>{
     //req.file contains the file information
     var file = new Parse.File(name, req.file);

     //save to database via Parse
     file.save(); //example code. 
     res.status(200).success("test code")
 })

此代码在Parse中返回TypeError，其中Parse.File无法从req.file创建Parse.File。

非常感谢任何帮助！

先谢谢你！

Answer 1

req.file不是Parse期望的文件格式的数据（而是它的Multer格式的对象） - 所以Parse.File被不恰当地调用。请参阅此处的Parse SDK：http://parseplatform.org/Parse-SDK-JS/api/classes/Parse.File.html这解释了可以为每个函数参数插入的数据类型。

req.file.buffer理论上应该有效（假设你每次从Multer获得一个文件）。由于您没有限制multer以这种方式工作，您的代码可能也应该处理一组文件。

您还需要为文件名创建一个字符串（名称似乎不是代码中的声明变量）。

Answer 2

让这个工作。

似乎我必须以base64格式对图片进行编码，并将base64值分配给要传递给post方法的HTML元素。

类似的东西：

<body>
<input id="inp" type='file' accept=".jpg">
<br>
<img id="img" height="150">
</body>

<input type="hidden" id="base64" name="base64" value=""> 
<br>
<br>
<input type="submit" id = "submit">
</form>


<script type="text/javascript">
    function readFile() {
      if (this.files && this.files[0]) {
      var FR= new FileReader();
      FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      //get the base64 encoded string and add it to id=b64. 
      document.getElementById("base64").value = e.target.result;
    }); 

    FR.readAsDataURL( this.files[0] );
  }
}

document.getElementById("inp").addEventListener("change", readFile);

最终我将文件转换为base64并将base64值插入名为base64的元素id中。

然后通过在post方法中调用req.body.base64来访问base64值。

解析：将上传的文件/图像发布到后端

2 个答案: