AngularJS 使用 ng-upload 上传图片 [英] AngularJS Uploading An Image With ng-upload

问题描述

我正在尝试使用 ng-upload 在 AngularJS 中上传文件，但我遇到了问题.我的 html 看起来像这样:

<form ng-upload method="post" enctype="multipart/form-data" action="/write" ><字段集><label>类别</label><select name="category_id" class=""><option value="0">选择一个类别</option><?php foreach($categories as $category): ?><option value="<?= $category -> category_id; ?>"><?= $category ->分类名称;?></option><?php endforeach;?></选择><label>标题</label><input type="text" class="title span5" name="post_title"placeholder="这里有一个吸引人的标题..."value="<?= $post -> post_title; ?>"/><label>附加图片</label><input type="file" name="post_image"/><a href='javascript:void(0)' class="upload-submit: uploadPostImage(contents, completed)" >裁剪图片</a><label>正文</label><div id="容器"><textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post ->post_content;?></textarea>
<div style='clear:both;'></div><label>预览</label><div id='textarea-preview'></div></fieldset><div class="span7" style="margin: 0;"><input type="submit" class="btn btn-success" value="创建帖子"/><input type="submit" class="btn btn-warning pull-right draft" value="另存为草稿"/>

</表单>

我的 js 控制器是这样的:

ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel',函数($scope，PostModel){$scope.uploadPostImage = 函数(内容，完成){控制台日志(已完成)；警报(内容)；}}]);

我面临的问题是当裁剪图像被点击并执行 uploadPostImage 时，它​​会上传整个表单.不想要的行为，但我可以让它工作.最大的问题是在 js 中，函数 uploadPostImage 'contents' 参数总是未定义，即使 'completed' 参数返回为真.

目标是仅上传用于裁剪的图像.我在这个过程中做错了什么?

解决方案

关于上传文件的 angular 文档几乎没有.许多解决方案需要自定义指令和其他依赖项(primis 中的 jquery ......只是为了上传文件......).经过多次尝试，我仅使用 angularjs 就发现了这一点(在 v.1.0.6 上测试)

html

Angularjs (1.0.6) 不支持input-file"标签上的 ng-model 所以你必须以本地方式"传递所有(最终)选定的文件来自用户.

控制器

$scope.uploadFile = function(files) {var fd = new FormData();//取第一个选择的文件fd.append("文件", 文件[0]);$http.post(uploadUrl, fd, {withCredentials: 真,标头:{'内容类型':未定义}，变换请求:angular.identity}).success(...好吧！...).error(..该死的！...);};

很酷的部分是 undefined 内容类型和 transformRequest: angular.identity，它们使 $http 能够选择正确的内容类型"并管理处理多部分数据时所需的边界.

I am trying to upload a file in AngularJS using ng-upload but I am running into issues. My html looks like this:

<div class="create-article" ng-controller="PostCreateCtrl">
        <form ng-upload method="post" enctype="multipart/form-data" action="/write" >
            <fieldset>
                <label>Category</label>
                <select name="category_id" class="">
                    <option value="0">Select A Category</option>
                    <?php foreach($categories as $category): ?>
                        <option value="<?= $category -> category_id; ?>"><?= $category -> category_name; ?></option>
                    <?php endforeach; ?>
                </select>

                <label>Title</label>
                <input type="text" class="title span5" name="post_title"
                       placeholder="A catchy title here..."
                       value="<?= $post -> post_title; ?>" />

                <label>Attach Image</label>
                <input type="file" name="post_image" />

                 <a href='javascript:void(0)'  class="upload-submit: uploadPostImage(contents, completed)" >Crop Image</a>

                <label>Body</label>
                <div id="container">
                <textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post -> post_content; ?></textarea>
                </div>
                <div style='clear:both;'></div>
                <label>Preview</label>
                <div id='textarea-preview'></div>

            </fieldset>
            <div class="span7" style="margin: 0;">
                <input type="submit" class="btn btn-success" value="Create Post" />
            <input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" />
            </div>

        </form>
    </div>

And my js controller looks like this:

ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel',
function($scope, PostModel) {

    $scope.uploadPostImage = function(contents, completed) {
        console.log(completed);
        alert(contents);
    }

}]);

The problem I am facing is when the crop image is hit and it executes uploadPostImage, it uploads the entire form. Not desired behavior but I can make it work. The big problem is in the js the function uploadPostImage 'contents' parameters is always undefined, even when the 'completed' parameter comes back as true.

The goal is to only upload an image for cropping. What am I doing wrong in this process?

解决方案

There's little-no documentation on angular for uploading files. A lot of solutions require custom directives other dependencies (jquery in primis... just to upload a file...). After many tries I've found this with just angularjs (tested on v.1.0.6)

html

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs (1.0.6) not support ng-model on "input-file" tags so you have to do it in a "native-way" that pass the all (eventually) selected files from the user.

controller

$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};

The cool part is the undefined content-type and the transformRequest: angular.identity that give at the $http the ability to choose the right "content-type" and manage the boundary needed when handling multipart data.

这篇关于AngularJS 使用 ng-upload 上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！