如何在Vue中通过Axios将表单数据转为JSON变量并保存到文件？

Got it, let's walk through how to save your collected form data as a JSON file—this depends a bit on whether you're working in the browser or a Node.js environment, so I'll cover both scenarios:

Since browsers restrict direct file system access for security, we'll create a downloadable JSON file instead. Here's how to tweak your existing code:

// Your existing form data collection logic
let newFormData = { 
  productName: this.productName, 
  productModel: this.productModel, 
  prodDescription: this.prodDescription, 
  prodPrice: this.prodPrice, 
  promoPrice: this.promoPrice 
};
console.log(newFormData);

// Convert data to human-readable JSON string
const jsonString = JSON.stringify(newFormData, null, 2);
// Wrap JSON in a file-like Blob object
const blob = new Blob([jsonString], { type: 'application/json' });
// Generate a temporary download URL
const downloadUrl = URL.createObjectURL(blob);
// Create a hidden anchor tag to trigger download
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = 'product-form-data.json'; // Name your output file here

// Trigger the download
document.body.appendChild(downloadLink);
downloadLink.click();
// Clean up to avoid memory leaks
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);

// Reset the form as before
e.target.reset();

Quick Notes: #

• The null, 2 in JSON.stringify adds 2-space indentation to make the JSON easy to read—you can adjust this or remove it for minified JSON.
• We clean up the temporary URL and anchor tag to prevent unnecessary browser memory usage.

If you're running this code in a Node.js backend (handling form submissions server-side), use the built-in fs module to write directly to a file:

Modern Async/Await Approach: #

import fs from 'fs/promises'; // For ES modules
// Or for CommonJS: const fs = require('fs').promises;

async function saveFormData(e) {
  let newFormData = { 
    productName: this.productName, 
    productModel: this.productModel, 
    prodDescription: this.prodDescription, 
    prodPrice: this.prodPrice, 
    promoPrice: this.promoPrice 
  };
  console.log(newFormData);

  try {
    const jsonString = JSON.stringify(newFormData, null, 2);
    // Write to a file (creates it if missing, overwrites if exists)
    await fs.writeFile('./product-form-data.json', jsonString, 'utf8');
    console.log('Form data saved as JSON successfully!');
  } catch (err) {
    console.error('Failed to save file:', err);
  }

  e.target.reset();
}

Legacy Callback Approach: #

const fs = require('fs'); // CommonJS syntax

function saveFormData(e) {
  let newFormData = { 
    productName: this.productName, 
    productModel: this.productModel, 
    prodDescription: this.prodDescription, 
    prodPrice: this.prodPrice, 
    promoPrice: this.promoPrice 
  };
  console.log(newFormData);

  const jsonString = JSON.stringify(newFormData, null, 2);
  fs.writeFile('./product-form-data.json', jsonString, 'utf8', (err) => {
    if (err) {
      console.error('Failed to save file:', err);
      return;
    }
    console.log('Form data saved as JSON successfully!');
  });

  e.target.reset();
}

Quick Notes: #

• Ensure your Node.js process has write permissions for the directory where you're saving the file.
• If you want to append data instead of overwriting, use fs.appendFile—just make sure to maintain valid JSON structure (like wrapping entries in an array).

内容的提问来源于stack exchange，提问作者Edwin Urbaniak