masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
angular.js - Jenis Kandungan siaran sudut ditetapkan, mengakibatkan ketidakupayaan untuk memuat naik imej. Tolong bantu! !
漂亮男人
漂亮男人 2017-05-15 17:10:24
0
3
780

Kod berikut ditetapkan dalam projek sudut atas beberapa sebab: 

    // $locationProvider.html5Mode(true);

    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

    /**
     * The workhorse; converts an object to x-www-form-urlencoded serialization.
     * @param {Object} obj
     * @return {String}
     */
    var param = function (obj) {
      var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

      for (name in obj) {
        value = obj[name];

        if (value instanceof Array) {
          for (i = 0; i < value.length; ++i) {
            subValue = value[i];
            fullSubName = name + '[' + i + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&';
          }
        }
        else if (value instanceof Object) {
          for (subName in value) {
            subValue = value[subName];
            fullSubName = name + '[' + subName + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&';
          }
        }
        else if (value !== undefined && value !== null)
          query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
      }

      return query.length ? query.substr(0, query.length - 1) : query;
    };

    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [function (data) {
      return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }];

Akibatnya, fail tidak boleh dimuat naik sekarang, malah penyerahan borang yang paling mudah tidak berfungsi: 

  <form action="upload/url" name="form1" method="post" enctype="multipart/form-data">
    <input id="file" name="file" type="file" accept="image/*">
    <button type="submit" class="btn btn-primary btn-lg">提交</button>
  </form>

Meminta bantuan daripada semua pakar, bagaimana saya boleh memuat naik gambar seperti biasa? Urgent, sangat mendesak, projek telah tertangguh untuk satu hari... Terima kasih!

漂亮男人
漂亮男人

membalas semua(3)
漂亮男人
漂亮男人2017-05-15 17:12:24 Tingkat 3

https://github.com/nervgh/ang... Ambillah, dialu-alukan

 showUpload: function (todo) {
                $uibModal.open({
                    animation: true,
                    size: 'lg',
                    templateUrl: 'app/theme/components/upload/upload.html',
                    controller: function ($scope, FileUploader) {
                        var uploader = $scope.uploader = new FileUploader({
                            url: basePath+'/admin/images/upload'
                        });
                        $scope.confirm=function () {
                            console.log(uploader)
                            if(uploader.queue.length<1){
                                toastr.info('请选择上传图片');
                                return
                            }
                            uploader.queue[0].upload();
                        }
                        // FILTERS
                        uploader.filters.push({
                            name: 'imageFilter',
                            fn: function (item, options) {
                                var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
                                return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
                            }
                        });
                        // CALLBACKS
                        uploader.onAfterAddingFile = function (fileItem) {
                            //console.info('onAfterAddingFile', fileItem);
                        };
                        uploader.onSuccessItem = function (fileItem, response, status, headers) {
                            if(response.success){
                                toastr.info('上传成功');
                                todo(response);
                                $scope.$dismiss();
                            }
                        };
                        uploader.onErrorItem = function (fileItem, response, status, headers) {
                            toastr.info('上传失败！');
                        };
                    }
                });
            }
(function () {
    'use strict';

  
        app.directive('ngThumb', ngThumb).directive('fileInputStyle', fileInputStyle);

    /** @ngInject */
    function ngThumb($window) {
        var helper = {
            support: !!($window.FileReader && $window.CanvasRenderingContext2D),
            isFile: function (item) {
                return angular.isObject(item) && item instanceof $window.File;
            },
            isImage: function (file) {
                var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
                return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
            }
        };

        return {
            restrict: 'A',
            template: '<canvas/>',
            link: function (scope, element, attributes) {
                if (!helper.support) return;

                var params = scope.$eval(attributes.ngThumb);

                if (!helper.isFile(params.file)) return;
                if (!helper.isImage(params.file)) return;

                var canvas = element.find('canvas');
                var reader = new FileReader();

                reader.onload = onLoadFile;
                reader.readAsDataURL(params.file);

                function onLoadFile(event) {
                    var img = new Image();
                    img.onload = onLoadImage;
                    img.src = event.target.result;
                }

                function onLoadImage() {
                    var width = params.width || this.width / this.height * params.height;
                    var height = params.height || this.height / this.width * params.width;
                    canvas.attr({width: width, height: height});
                    canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
                }
            }
        };
    }

    function fileInputStyle() {
        return {
            restrict: 'A',
            link: function ($scope, element, attrs) {
                bind_button(make_form(element, '选择文件'));
                function make_form($el, text) {
                    $el.wrap('<p></p>');
                    $el.hide();
                    $el.after('<p class="input-append input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">' + text + '</button>\
                        </span><input class="input-large form-control" name="textfiles" type="text"></p>');
                    return $el.parent();
                };
                function bind_button($wrap) {
                    $wrap.find('.input-append').click(function (e) {
                        e.preventDefault();
                       $wrap.find('input[type="file"]').click();
                    });
                };
            }
        };
    }
})();
<p class="modal-content">
    <p class="modal-header">
        <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
            <em class="ion-ios-close-empty sn-link-close"></em>
        </button>
        <h4 class="modal-title" id="myModalLabel">上传图片</h4>
    </p>
    <p class="modal-body">
        <form name="uploadForm">
            <p class="form-group">
                <p class="col-sm-12">
                    <input type="file" nv-file-select uploader="uploader" file-input-style/><br/>
                    <table class="table">
                        <thead>
                        <tr>
                            <th width="30%">名称</th>
                            <th ng-show="uploader.isHTML5">大小</th>
                            <th ng-show="uploader.isHTML5">进度</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in uploader.queue">
                            <td>
                                <strong>{{ item.file.name }}</strong>
                                <p ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></p>
                            </td>
                            <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                            <td ng-show="uploader.isHTML5">
                                <p class="progress" style="margin-bottom: 0;">
                                    <p class="progress-bar" role="progressbar"
                                         ng-style="{ 'width': item.progress + '%' }"></p>
                                </p>
                            </td>
                            <td class="text-center">
                                <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                                <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                            </td>
                            <td nowrap>
                                <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()"
                                        ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                    <span class="glyphicon glyphicon-upload"></span> 上传
                                </button>
                                <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()"
                                        ng-disabled="!item.isUploading">
                                    <span class="glyphicon glyphicon-ban-circle"></span> 取消上传
                                </button>
                                <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                    <span class="glyphicon glyphicon-trash"></span> 移除
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </p>
            </p>
        </form>
    </p>
    <p class="modal-footer">
        <button type="button" class="btn btn-primary" ng-click="$dismiss()">关闭</button>
        <button type="button" class="btn btn-info" ng-click="confirm()">确定</button>
    </p>
</p>

Suka +0
Tambah Balasan
淡淡烟草味
淡淡烟草味2017-05-15 17:12:24 Tingkat 2

Subjek bertanya dua soalan: 1. Mengapa tetapan pengepala dibuat 2. Bagaimana untuk memuat naik gambar

1. Mengapa anda perlu menetapkan pengepala?

http://stackoverflow.com/ques...

Pengaturcara syarikat harus merujuk kepada soalan ini. Interaksi API bahagian belakang syarikat anda menggunakan Content-Type: x-www-form-urlencoded, dan angular use Content-type: application/json Jadi Content-type dan serialization telah ditukar. Subjek boleh merujuk kepadanya.

2. Muat naik gambar

Penerangan subjek tidak begitu jelas tentang cara penyerahan ini dimulakan. Tetapi masalahnya ialah kerana jenis kandungan penyerahan fail ditetapkan dengan tidak betul. Sediakan cara untuk menyerahkan menggunakan FormData: 


var fd = new FormData();
fd.append('file', file);

$http.post(uploadUrl, fd, {
   transformRequest: angular.identity,
   headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
Suka +0
Tambah Balasan
给我你的怀抱
给我你的怀抱2017-05-15 17:12:24 Tingkat 1

Kod js anda adalah untuk mengekod data ke dalam borang x-www-form-urlencoded. Tetapi tiada data yang mengikat dalam html anda, yang pastinya tidak mungkin! Jadi saya mengesyaki bahawa anda tidak memahami penggunaan angularjs sama sekali.
Selain itu, anda tidak menerangkan dengan jelas cara anda menyiarkan data. Siapa tahu di mana masalah anda?

Kembali selepas menghantar kod lengkap

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan