Ionic：向服务器上传JSON/CSV文件问题求助

Hey there! Let's figure out why your http.post upload isn't working and get your JSON/CSV files into the same server directory you access via FileZilla. Here's a step-by-step breakdown of the most common issues and fixes:

First: Confirm Your Target Directory's Absolute Path #

The biggest gotcha here is using the wrong server path. FileZilla shows you the directory visually, but your backend needs the absolute system path (like /var/www/html/uploads or /home/your-user/public_files).

To get this path:

• In FileZilla, right-click on the directory you use for manual uploads and select "File permissions" — the absolute path will be listed at the top.
• Or, if you can SSH into the server, navigate to the directory and run pwd — that'll spit out the full absolute path you need.

Common Issues & Solutions #

1. You're Not Using multipart/form-data for File Uploads #

HTTP file uploads require the Content-Type header to be set to multipart/form-data — plain application/json won't work for sending files. If your http.post call isn't handling this, the server won't recognize the file.

2. Server Directory Permissions Are Wrong #

FileZilla uses your FTP user to upload files, but your backend service (like Node.js/Express, Flask, or PHP) runs under a different user (e.g., www-data for Apache/Nginx). If this user doesn't have write access to the target directory, uploads will fail silently or throw a 403 error.

Fix permissions via SSH:

# Replace /path/to/your/directory with your confirmed absolute path
sudo chown -R www-data:www-data /path/to/your/directory
sudo chmod -R 755 /path/to/your/directory

(Adjust www-data to match your server's web service user if needed.)

3. Your Backend Isn't Properly Parsing Uploaded Files #

Most frameworks don't handle file uploads out of the box — you need a library to parse the multipart/form-data request. Here are examples for popular stacks:

Example 1: Node.js/Express with Multer

First install the Multer library:

npm install multer

Then set up your backend:

const express = require('express');
const multer = require('multer');
const app = express();

// Configure storage to use your absolute directory path
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // Replace this with your confirmed absolute path
    cb(null, '/var/www/html/uploads');
  },
  filename: (req, file, cb) => {
    // Keep the original filename, or customize it here
    cb(null, file.originalname);
  }
});

const upload = multer({ storage: storage });

// Create an endpoint to handle uploads
app.post('/upload-file', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('No file was selected for upload.');
  }
  res.status(200).send(`Success! File saved as: ${req.file.filename}`);
});

// Start the server (make sure the port is open in your firewall)
app.listen(3000, '0.0.0.0', () => {
  console.log('Upload server running on port 3000');
});

Example 2: Python/Flask with Flask-Uploads

Install dependencies:

pip install flask flask-uploads

Backend code:

from flask import Flask, request
from flask_uploads import UploadSet, configure_uploads, ALL

app = Flask(__name__)

# Set your absolute directory path here
app.config['UPLOADED_FILES_DEST'] = '/var/www/html/uploads'
file_uploader = UploadSet('files', ALL)
configure_uploads(app, file_uploader)

@app.route('/upload-file', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return 'No file found in request', 400
    uploaded_file = request.files['file']
    if uploaded_file.filename == '':
        return 'No file selected', 400
    if uploaded_file:
        filename = file_uploader.save(uploaded_file)
        return f'File uploaded successfully: {filename}', 200

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Testing the Upload #

Once your backend is running, test it with a tool like curl or Postman:

# Replace paths and server IP/port with your details
curl -X POST -F "file=@/path/to/your/local/file.json" http://your-server-ip:3000/upload-file

If it works, check the directory via FileZilla — your file should be there!

Troubleshooting Tips #

• If you get a 404 error: Double-check your backend endpoint URL and server port.
• If you get a 403 error: Recheck the directory permissions (make sure the web service user has write access).
• If the file doesn't appear: Verify the absolute path in your backend code matches exactly what you got from FileZilla/pwd.

内容的提问来源于stack exchange，提问作者C. Struckmann