AngularJS结合FileReader：如何将文件保存到服务器指定路径？

你说得完全对——这段代码只是实现了文件的本地预览功能，根本没有把文件上传到服务器。我来帮你拆解清楚现有逻辑，再告诉你怎么修改实现真正的服务器端保存。

咱们先一步步看这段代码到底在做什么：

HTML部分 #

• ng-controller="MyCtrl"：绑定控制器，把视图和逻辑关联起来
• ng-repeat="step in stepsModel"：循环渲染预览图片，stepsModel数组里存的是图片的Data URL
• 文件输入框的onchange="angular.element(this).scope().imageUpload(event)"：当用户选择文件后，调用控制器里的imageUpload方法并传入事件对象

JS部分 #

1. imageUpload方法：

   • 从事件对象里获取用户选中的文件列表event.target.files
   • 循环每个文件，创建FileReader对象——这是浏览器提供的本地文件读取API，只能在客户端读取文件内容，不能和服务器交互
   • 调用reader.readAsDataURL(file)：把文件转换成base64编码的Data URL（就是那种开头是data:image/png;base64,...的字符串）

2. imageIsLoaded方法：

   • 当FileReader读取完成后，把生成的Data URL添加到stepsModel数组
   • 调用$scope.$apply()：手动触发Angular的脏检查，让页面更新并显示预览图

整个流程全程在浏览器本地完成，没有任何向服务器发送请求的代码，所以文件完全不会上传到服务器。

要完成真正的文件上传，需要前端发送文件到服务器 + 后端接收并保存文件两部分配合，下面是具体步骤：

1. 前端代码修改（AngularJS部分） #

我们需要在原有预览逻辑的基础上，添加AJAX上传逻辑，用Angular的$http服务发送FormData（这是浏览器用来上传文件的标准格式）：

var myApp = angular.module('myApp',[]);

// 注入$http服务，用来发送请求
function MyCtrl($scope, $http) {
    $scope.stepsModel = [];

    $scope.imageUpload = function(event){
        var files = event.target.files;
        // 创建FormData对象，用来包装要上传的文件
        var formData = new FormData();

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            // 把文件添加到FormData，键名'images'要和后端接口对应
            formData.append('images', file);

            // 保留原有本地预览逻辑
            var reader = new FileReader();
            reader.onload = $scope.imageIsLoaded;
            reader.readAsDataURL(file);
        }

        // 发送POST请求到服务器的上传接口（这里的'/upload'是示例路径，要和后端一致）
        $http.post('/upload', formData, {
            // 关键配置：让浏览器自动设置正确的Content-Type（包含文件上传需要的boundary）
            headers: {'Content-Type': undefined},
            // 告诉Angular不要自动序列化FormData，保持原始格式
            transformRequest: angular.identity
        }).then(function(response) {
            console.log('文件上传成功！', response.data);
            // 这里可以添加上传成功后的提示，比如给用户弹消息
        }, function(error) {
            console.error('文件上传失败', error);
            // 上传失败的处理，比如提示用户重试
        });
    }

    $scope.imageIsLoaded = function(e){
        $scope.$apply(function() {
            $scope.stepsModel.push(e.target.result);
        });
    }
}

HTML部分可以优化得更符合Angular风格，把原生onchange换成ng-change：

<div ng-controller="MyCtrl">
    <div ng-repeat="step in stepsModel">
        <img class="thumb" ng-src="{{step}}" />
    </div>
    <input type='file' ng-model-instant ng-change="imageUpload($event)" multiple />
</div>

2. 后端接口示例（以Node.js + Express为例） #

你需要在服务器端编写一个接收文件的接口，这里用Node.js的Express框架和multer中间件（专门处理文件上传的工具）来演示：

第一步：安装依赖 #

在服务器项目目录下执行命令：

npm install express multer --save

第二步：编写服务器代码 #

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

// 配置multer，指定文件保存的路径和文件名规则
const storage = multer.diskStorage({
    // 设置文件保存到服务器的路径，比如项目根目录下的uploads文件夹
    destination: function (req, file, cb) {
        const uploadDir = path.join(__dirname, 'uploads');
        // 确保uploads文件夹存在，不存在则创建
        require('fs').mkdirSync(uploadDir, { recursive: true });
        cb(null, uploadDir);
    },
    // 自定义文件名，避免重名（原文件名+时间戳）
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

// 创建multer实例，限制文件大小（比如5MB），只允许图片类型
const upload = multer({
    storage: storage,
    limits: { fileSize: 5 * 1024 * 1024 },
    fileFilter: function (req, file, cb) {
        // 只允许图片文件
        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (allowedTypes.includes(file.mimetype)) {
            cb(null, true);
        } else {
            cb(new Error('只允许上传图片文件！'), false);
        }
    }
});

// 处理上传请求的接口，对应前端的'/upload'路径，upload.array('images')表示接收多个名为images的文件
app.post('/upload', upload.array('images'), function (req, res) {
    // req.files包含所有上传成功的文件信息
    res.json({
        success: true,
        message: '文件上传成功',
        files: req.files.map(file => ({
            filename: file.filename,
            savePath: file.path,
            size: file.size
        }))
    });
});

// 启动服务器，监听3000端口
app.listen(3000, function () {
    console.log('服务器运行在 http://localhost:3000');
});

其他后端语言的思路 #

如果你用的是PHP、Java、Python等其他语言，核心逻辑都是：

• 接收multipart/form-data格式的请求
• 提取请求中的文件数据
• 将文件写入服务器的指定路径

比如PHP可以用$_FILES数组获取文件，然后用move_uploaded_file()方法保存。

注意事项 #

• 服务器端的保存路径要确保有写入权限，否则会保存失败
• 建议在前端和后端都添加文件类型、大小的验证，避免恶意文件上传
• 如果需要支持大文件上传，可能需要配置服务器的上传大小限制（比如Nginx、Apache的相关配置）

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