Vuejs：Axios 发布 JSON 数据和 Image 数据

Posted 2023-02-22

【中文标题】Vuejs：Axios 发布 JSON 数据和 Image 数据

【英文标题】：Vuejs: Axios post JSON data and Image data

【发布时间】：2020-05-14 12:55:33

【问题描述】：

目前，我正在创建一个包含图像数据和 JSON 数据的表单。我正在使用 2 post 方法将图像数据和 JSON 数据分别发布到我的 nodejs 后端。是否有任何可能的解决方案使我只能使用 axios 和使用 nodejs 的后端发布一次图像和 JSON 数据。

以下是我的代码。

前端 vue.js

submitAuth() 
  console.log(this.promo.bannerImg)
  const formData = new FormData()
  formData.append('bannerImg', this.promo.bannerImg)
  formData.append('inAppImg', this.promo.inAppImg)
  formData.append('inAppImg', this.promo)

   axios.post(`http://localhost:5000/success`, 
       this.promo
     )
     .then(response =>  
       console.log('Submit Success')
     )
     .catch(e => 
       console.log('Submit Fail')
     )

  axios.post('http://localhost:5000/uploadImg', 
      formData
  ).then(response => 
    console.log('Submit Success')
  ).catch(e => 
    console.log('Submit Fail')
  )
,

,

后端node.js

app.post("/success", function (request, response) 
  co(function* () 
    var promouid = request.body.uid
    var filename = __dirname + '/public/promo-json/' +  promouid + '.json'
    var promotionJSON = JSON.stringify(request.body)
    fs.writeFile(filename, promotionJSON, 'utf-8', function (err) 
      if (err) throw err;
      console.log(request.body);
    );

    var stream = fs.createReadStream(filename);
    var size = fs.statSync(filename).size;
    var result = yield client.putStream( 
     'promojson/' + promouid + '.json', stream, contentLength: size);
    console.log(result);
  ).catch(function (err) 
    console.log(err);
  );
);

app.post("/uploadImg", function (req, res) 
  var storage = multer.diskStorage(
        destination: 'public/image', 
        filename: function ( req, file, cb ) 
          // set image name
          console.log()
          cb( null,  'asdasdsad-' + Date.now());
      
    );
    var upload = multer(
        storage: storage,
    ).any();

    upload(req, res, function(err) 
        if (err) 
            console.log(err);
            return res.end('Error');
         else 
            console.log(req.body);
            req.files.forEach(function(item) 
                console.log(item);
            );
          res.end('File uploaded');
        
    );
  );

【问题讨论】：

如何在客户端将图像转换为 base64 编码的字符串，并在同一个 post 请求中将其推送到服务器。您只需要在服务器上转换回文件。 ps：base64极有可能使文件大小翻倍，在你的服务器上压缩可以派上用场

我不认为转换为 base64 图像是将图像数据传递到后端的好习惯。

它有它的用例，据我所知，如果你已经在使用字符串，那么练习并不可怕。您甚至不需要在保存之前进行解码。您可以将字符串保存在任何地方。

【参考方案1】：

如果您想使用单个请求上传所有内容，您可能最好使用FormData 来上传所有需要上传的内容。

您可以获取 JSON 数据，将其序列化为字符串，然后将其与图像一起添加到 FormData。

您的前端 vue.js 看起来像这样：

const formData = new FormData();

// Add images to form data
formData.append('bannerImg', this.promo.bannerImg)
formData.append('inAppImg', this.promo.inAppImg)
formData.append('inAppImg', this.promo)

// Add the serialized JSON data to the formData (not
// sure what your JSON object is called)
formData.append('data', JSON.stringify(this.data));

// Submit the form data 
axios.post('http://localhost:5000/uploadImg', 
  formData
).then(response => 
  console.log('Submit Success')
).catch(e => 
  console.log('Submit Fail')
);

在后端，您只需反序列化发送到 JSON 对象的 FormData 中的 data 字段，然后您就可以使用它了。

【讨论】：

但是图片是怎么用这个上传的呢？

您可以使用与在 /success 端点中保存提交到 /upload 端点 (req.files.forEach(...)) 的文件相同的代码。您只需从 FormData 字段之一中检索 JSON，然后遍历上传的文件并保存它们。