Question

我正尝试通过将图像保存到文件夹并将其名称保存为json来通过ajax将图像上传至网页。我正在通过客户端的表单来完成此操作。

到目前为止，图像已保存到文件夹中，图像名称已保存到json文件中。

但是，当我在客户端提交时，图像仅出现在第三次上传中，这是json文件中列出的第一张图像。随后的每个提交都会上传json文件中列出的第一张图片。

此外，我注意到如果刷新页面或关闭然后返回，则会发生错误。似乎只有json页面为空白并且我要上传到空白json文件时才加载图像？

这是上传图像的正确方法，如何解决此问题？

我不想使用ejs或php或数据库。谢谢。

到目前为止我的服务器代码：

const upload = multer({limits:{fileSize:4000000}}).single('avatar')
app.post('/upload', (req, res)=>{
    upload(req, res, async function(err){ 
     // check for error thrown by multer- file size etc
     if( err|| req.file === undefined){
         console.log(err)
         res.send("error occured")
     }else{
        var image = await sharp(req.file.buffer)
            .resize({ width: 200, height:200 }) 
            .toFile('./client/'+req.file.originalname)
            .catch( err => { console.log('error: ', err) })
        res.send(req.body)
        var ImageName = {
            id: uuidv4(),
            name: req.file.originalname
        }

        var data = JSON.stringify(ImageName, null, 2);
        fs.appendFile('./client/images.json', data+'\r\n', (err) => {
            if (err) throw err;
            console.log("filename saved to json file");
        })
     }
    })
})

客户端js：

  event.preventDefault() // prevent form from posting without JS
  var xhttp = new XMLHttpRequest(); // create new AJAX request

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) { // sucess from server
      console.log('sent'+this.responseText+ xhttp.status);

    }else{ // errors occured
      console.log(xhttp.status);
    }
  }

  xhttp.open("POST", "upload")
  var formData = new FormData()
  formData.append('name', document.getElementById('name').value) 
  formData.append('avatar', document.getElementById('avatar').files[0]) 
  xhttp.send(formData)
}

$('form').on("submit", function(){ 
  $.ajax({
    type: "GET",
    data: {format: "JSON"},
    error: function(){
      $("#status").html("<p> An error occured </p>");
    },
    success:
      function(data){
        var $image = $('#new-image')
        $.getJSON("images.json", function(data){
          $("form").submit(function(){
            $image.append('<img src= "' + data["name"] + '">');
          })
      })
  }
    })
  })

通过服务器使用Ajax将图像上传到Web

0 个答案: