AngularJS+Flask场景下如何修改粘贴图片的默认文件名？

Great question! Let's walk through both front-end (your preferred approach) and back-end solutions to rename that pasted image file instead of relying on Chrome's default image.png name.

Since the File object from the clipboard is read-only, we can create a new File object with a custom name while preserving the original image data. Here's how to modify your existing handlePaste function:

ctrl.handlePaste = function(event) {
  if(event.clipboardData.items.length > 0) {
    for(var i = 0; i < event.clipboardData.items.length; i++) {
      var item = event.clipboardData.items[i]; // type: DataTransferItem
      if (item.type.indexOf("image") != -1) {
        let originalFile = item.getAsFile(); // type: File
        
        // Generate a custom filename - use any logic you want here!
        // Example 1: Timestamp-based unique name (avoids overwrites)
        let fileExtension = originalFile.type.split('/')[1];
        let customFilename = `pasted-image-${Date.now()}.${fileExtension}`;
        // Example 2: User-specific name (if you have a username/ID)
        // let customFilename = `${ctrl.currentUser}-pasted-image.png`;
        
        // Create new File object with our custom name
        let renamedFile = new File([originalFile], customFilename, {
          type: originalFile.type,
          lastModified: originalFile.lastModified
        });
        
        // Store the renamed file instead of the original
        ctrl.uploadFiles.push(renamedFile);
        break;
      }
    }
  }
}

Quick Notes: #

• The File constructor wraps the original image blob with your custom name—this works in Chrome and all modern browsers.
• Pick a filename logic that fits your use case: timestamps ensure uniqueness, while user-specific names make files easier to trace.

If front-end renaming isn't feasible (e.g., older browser constraints), you can rename the file directly on your Flask server. The FileStorage object lets you either modify its filename property or specify a custom path when saving:

from flask import Flask, request
import os
import time
from werkzeug.utils import secure_filename

app = Flask(__name__)
UPLOAD_FOLDER = '/path/to/your/upload/directory'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/upload-pasted-image', methods=['POST'])
def upload_image():
    if 'image' not in request.files:
        return 'No file received', 400
    
    uploaded_file = request.files['image']
    if uploaded_file.filename == '':
        return 'No file selected', 400
    
    # Generate a safe, unique filename
    file_ext = os.path.splitext(uploaded_file.filename)[1]
    # Python 2.7 uses .format() instead of f-strings
    custom_filename = "pasted-image-{}{}".format(int(time.time()), file_ext)
    # Sanitize the name to prevent security risks
    safe_filename = secure_filename(custom_filename)
    
    # Option 1: Modify the FileStorage's filename and save
    uploaded_file.filename = safe_filename
    uploaded_file.save(os.path.join(app.config['UPLOAD_FOLDER'], uploaded_file.filename))
    
    # Option 2: Skip modifying the object, save directly with custom path
    # save_path = os.path.join(app.config['UPLOAD_FOLDER'], safe_filename)
    # uploaded_file.save(save_path)
    
    return 'File uploaded with custom name', 200

Quick Notes: #

• Always use secure_filename() to sanitize custom names—this prevents path traversal attacks.
• Timestamps are a safe bet for unique filenames, ensuring you never overwrite existing files on the server.

内容的提问来源于stack exchange，提问作者Valentin Coudert