使用 ng-flow 如何以及在何处保存上传的文件？答案

【问题标题】：How and where save uploaded files with ng-flow?使用 ng-flow 如何以及在何处保存上传的文件？
【发布时间】：2014-07-11 18:39:26
【问题描述】：

首先，我使用ng-flow（angular.js框架上的html5文件上传扩展）

我的文件已上传，我将事件记录在控制台中。但我不明白在哪里以及如何保存它们。

这是我的html代码，调用上传。

<div flow-init flow-files-submitted="$flow.upload()">   
<div class="drop" flow-drop ng-class="dropClass">
    <span class="btn btn-default" flow-btn>Upload File</span>
    <span class="btn btn-default" flow-btn flow-directory ng-show="$flow.supportDirectory">Upload Folder</span>
    <b>OR</b>
    Drag And Drop your file here
</div>

这是我的配置

app.config(['flowFactoryProvider', function (flowFactoryProvider) {
  flowFactoryProvider.defaults = {
    target: 'upload.php',
    permanentErrors: [404, 500, 501],
    maxChunkRetries: 1,
    chunkRetryInterval: 5000,
    simultaneousUploads: 4,
    singleFile: true
  };
  flowFactoryProvider.on('catchAll', function (event) {
    console.log('catchAll', arguments);
  });
  // Can be used with different implementations of Flow.js
  // flowFactoryProvider.factory = fustyFlowFactory;
}]);

upload.php 被调用，$_GET 已满数据，

<script>alert('alert' + array(8) {
  ["flowChunkNumber"]=>
  string(1) "1"
  ["flowChunkSize"]=>
  string(7) "1048576"
  ["flowCurrentChunkSize"]=>
  string(6) "807855"
  ["flowTotalSize"]=>
  string(6) "807855"
  ["flowIdentifier"]=>
  string(11) "807855-3png"
  ["flowFilename"]=>
  string(5) "3.png"
  ["flowRelativePath"]=>
  string(5) "3.png"
  ["flowTotalChunks"]=>
  string(1) "1"
}
)</script>

但是当我在这里时，我必须做些什么来保存我的文件？

我尝试在flowFilename 和flowRelativePath 上执行move_uploaded_file()，但没有附加任何内容。

我是 js 新手。

谢谢。

【问题讨论】：

标签： javascript php angularjs flow-js

【解决方案1】：

查看upload.php示例脚本：

https://github.com/flowjs/flow.js/blob/master/samples/Backend%20on%20PHP.md

// init the destination file (format <filename.ext>.part<#chunk>
// the file is stored in a temporary directory
$temp_dir = 'temp/'.$_POST['flowIdentifier'];
$dest_file = $temp_dir.'/'.$_POST['flowFilename'].'.part'.$_POST['flowChunkNumber'];

【讨论】：

请问有java例子吗？我在 git 中只找到了 php 的

【解决方案2】：

使用 flow.js 上传图片后，会向您的服务器发送一个新的发布请求。您需要处理此 POST 请求并在之后操作文件。

如果您使用的是 Java + Spring MVC，它看起来像

@RequestMapping(value = "/upload",
        method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE)
public void handleFileUpload(@RequestParam("file") MultipartFile file) {
    log.debug("REST request to handleFileUpload");
    try {
        BufferedOutputStream stream =
                new BufferedOutputStream(new FileOutputStream(new File(path + file.getName())));
        stream.write(file.getBytes());
        stream.close();
        log.debug("You successfully uploaded " + file.getName() + "!");
    } catch (IOException e) {
        e.printStackTrace();
    }
}

【讨论】：

【解决方案3】：

我刚刚花了半天时间在 ng-flow 上工作，并想为 PHP 发布解决方案。它没有利用分块和恢复功能，我只需要无需刷新页面即可上传的内容。

首先， flow-init="{target: '/upload', testChunks:false}" 示例

<div flow-init="{target: '/upload', testChunks:false}" flow-files-submitted="$flow.upload()" flow-file-success="$file.msg = $message">
            <input type="file" flow-btn />
            <span flow-btn>Upload File</span>
</div>

第二，

它现在应该向“/upload”发布一个请求.....在该请求中存在一个 $_FILES 数组。

一行代码为我保存了文件：

$result=move_uploaded_file($_FILES['file']['tmp_name'],'yourfilename');

如果您希望通过角度控制器来控制它，您可以像这样设置值：

    $scope.uploader={};
    $scope.upload = function (id) {

        $scope.uploader.flow.opts.testChunks=false;
        $scope.uploader.flow.opts.target='/upload;
        $scope.uploader.flow.upload();
    }

并在您的 html 中添加：

<div flow-init flow-name="uploader.flow">
<button flow-btn>Add files</button>
<div>

不要

【讨论】：

【解决方案4】：

创建一个名为 uploads 的文件夹意味着您将临时文件移动到此处，然后在 php 脚本中添加代码。

$uploads_dir = 'uploads';
$target_file = $uploads_dir .'/'. basename($_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'],$target_file);

【讨论】：