Extjs中如何将已预览的选中图片保存至应用目录？

嘿，我明白你的需求——已经搞定了图片预览，现在要把选中的图片存到自己的应用目录里对吧？你提到的setSrc应该是指更新预览的图片路径到新保存的文件，我来一步步给你讲清楚怎么做：

核心流程 #

其实整个逻辑拆成三步就很清晰：

• 拿到用户选中的原始图片文件（既然能预览，说明你已经获取到这个文件对象啦）
• 将文件复制/移动到你的应用指定目录
• （可选）更新预览的图片源为新保存的文件路径

具体实现示例（以Electron/Node.js桌面应用为例） #

因为你提到“应用目录”，先假设你是在桌面应用场景下，用Node.js的文件系统模块来操作：

1. 先确定应用的目标保存目录
   首先得明确图片要存在哪，比如Electron里可以用app.getPath('userData')获取应用的用户数据目录，安全性和兼容性都不错：

   const { app } = require('electron');
   const path = require('path');
   const fs = require('fs').promises;
   
   // 在应用用户数据目录下创建一个专属的图片文件夹
   const saveDir = path.join(app.getPath('userData'), 'app_images');
   

2. 确保保存目录存在
   先检查目录是否存在，不存在就创建，避免后续保存报错：

   async function ensureDirExists(dir) {
     try {
       await fs.access(dir);
     } catch {
       // recursive: true 会自动创建嵌套目录
       await fs.mkdir(dir, { recursive: true });
     }
   }
   

3. 保存图片并更新预览源
   假设你已经通过文件选择器拿到了用户选中的文件对象（比如selectedFile），接下来复制文件到目标目录，再更新预览的src：

   async function saveImageToAppDir(selectedFile) {
     // 先确保目录存在
     await ensureDirExists(saveDir);
     // 生成保存路径，这里用原文件名，也可以加时间戳避免重名
     const savePath = path.join(saveDir, `${Date.now()}_${selectedFile.name}`);
     // 复制文件（如果要移动原文件，可用fs.rename，但跨磁盘场景下复制+删除更稳妥）
     await fs.copyFile(selectedFile.path, savePath);
     // 这里就是你说的setSrc，把预览图片的源换成新保存的文件路径
     document.getElementById('preview-img').src = `file://${savePath}`;
     return savePath;
   }
   

如果是JavaFX场景（你提到的setSrc可能对应ImageView的设置） #

要是你做的是Java桌面应用，逻辑也差不多：

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

// 假设已经通过FileChooser拿到选中的文件
File selectedFile = ...;
// 定义应用内的图片保存目录
String appDir = System.getProperty("user.dir") + File.separator + "app_images";
File saveDir = new File(appDir);
if (!saveDir.exists()) {
    saveDir.mkdirs();
}
// 生成目标路径，加时间戳避免重名
Path targetPath = Paths.get(appDir, System.currentTimeMillis() + "_" + selectedFile.getName());
// 复制文件到目标目录
try {
    Files.copy(selectedFile.toPath(), targetPath);
    // 更新ImageView的图片源（对应你说的setSrc逻辑）
    ImageView previewView = ...;
    previewView.setImage(new Image(targetPath.toUri().toString()));
} catch (IOException e) {
    e.printStackTrace();
}

几个关键注意点 #

• 权限问题：确保你的应用有写入目标目录的权限，比如macOS沙箱应用、Windows的Program Files目录都需要额外配置权限
• 文件名冲突：建议给保存的文件名加时间戳或随机字符串，避免同名文件被覆盖
• 移动vs复制：如果需要把原文件移到应用目录，用fs.rename（Node.js）或Files.move（Java），但跨磁盘场景下移动可能失败，复制+删除原文件更可靠

要是你用的是其他技术栈，可以告诉我，我再调整示例~

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