Javascript 解析：将上载的文件/图像发布到后端_Javascript_Node.js_Express

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

javascript node.js express

Javascript 解析：将上载的文件/图像发布到后端,javascript,node.js,express,Javascript,Node.js,Express,我有一个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()};

我有一个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>

我的目标是上传一个图像，然后当用户按submit时，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

非常感谢您的帮助

提前谢谢你

req.file不是Parse期望的文件格式的数据（而是Multer格式的对象）——因此Parse.file被不恰当地调用。请参见此处的Parse SDK：这解释了可以为每个函数参数插入的数据类型

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

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

刚刚让这个工作开始

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

比如：

<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值
<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);