角度上传视频

时间:2019-07-19 10:53:05

标签: php angular

我正尝试用角度上传视频并将其发送到php后端服务器。

我使用的是角度6,使用了ng2-file-upload,它可以处理图像,但是当我发送视频时,服务器上显示“无属性”

component.html

<div class="container">

<div class="navbar navbar-default">
    <div class="navbar-header">
         <a class="navbar-brand" href>Add Video</a>
    </div>
</div>

<div class="row">

   <div class="col-md-3">

      <h3>Select files</h3>

          Single
          <input type="file" ng2FileSelect [uploader]="uploader" />
   </div>

   <div class="col-md-9" style="margin-bottom: 40px">

        <h3>Upload queue</h3>
        <p>Queue length: {{ uploader?.queue?.length }}</p>

        <table class="table">
            <thead>
                <tr>
                   <th width="50%">Name</th>
                   <th>Size</th>
                   <th>Progress</th>
                   <th>Status</th>
                   <th>Actions</th>
                </tr>
            </thead>
            <tbody>
               <tr *ngFor="let item of uploader.queue">
                 <td><strong>{{ item?.file?.name }}</strong></td>
                 <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                 <td *ngIf="uploader.isHTML5">
                 <div class="progress" style="margin-bottom: 0;">
                     <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                  </div>
                 </td>
                    <td class="text-center">
                        <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                        <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs"
                                (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                            <span class="glyphicon glyphicon-upload"></span> Upload
                        </button>
                        <button type="button" class="btn btn-warning btn-xs"
                                (click)="item.cancel()" [disabled]="!item.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                        </button>
                        <button type="button" class="btn btn-danger btn-xs"
                                (click)="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span> Remove
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

            <div>
                <div>
                    Queue progress:
                    <div class="progress" style="">
                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

component.ts

const URL = global.getBasePathV2() + 'user/upload-file';

public uploader:FileUploader = new FileUploader({url: URL, additionalParameter: {'accessToken': userData.accessToken}});

-PHP API我对文件做了var_dump:

var_dump($_FILES);
die();

图像输出

array(1) { ["file"]=> array(5) { ["name"]=> string(9) "alpha.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(14) "/tmp/phpM0SSFB" ["error"]=> int(0) ["size"]=> int(13560) } }

视频输出

array(0) {}
No properties

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

所以,很长一段时间后,我终于成功上传了:)

问题出在php服务器中。 原来,我的代码工作得很好,但对于<2M:/

的小型视频

我像这样更改了php.ini中的配置:

php_value upload_max_filesize 20M
php_value post_max_size 20M
php_value max_input_time 300
php_value max_execution_time 300

现在我可以上传小于20M的视频了:)

希望这对您有所帮助。