标签: angular-file-upload

我正在使用Angular-File-Upload将文件上传到服务器.一切正常,文件可以保存在DB中.

问题是,如何在编辑模式下加载我保存的图像？

这是canvas上传pic时创建的指令

'use strict';

myApp

    .directive('ngThumb', ['$window', function($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 …

我尝试使用角度上传器,使用npm下载它,然后将其全部浏览到单个文件中.错误详细信息可以在这里看到

我无法理解错误,因为现在我还是AngularJS的新手.这是我的代码

var angular = require('angular');
angular
    .module('jobApp', [require('angular-material'), require('ng-file-upload')])
    .controller('MainCtrl', ['$rootScope', '$scope', '$mdToast', '$animate', '$http', '$timeout', '$q', '$log', 'Upload',
        function($rootScope, $scope, $mdToast, $animate, $http, $timeout, $q, $log, Upload) {
        'use strict';
        // Initialize the scope variables
        $scope.$watch('files', function () {
            $scope.upload($scope.files);
        });
        $scope.upload = function (files) {
            if (files && files.length) {
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    Upload.upload({
                        url: 'http://sr-recruit.herokuapp.com/resumes',
                        fields: {
                            'name': $scope.name,
                            'email': $scope.email, …

我正在使用input type="file"角度js上传控件.每次我点击浏览,我都不想看到以前选择的文件.默认情况下,这似乎保留.可以通过编写指令来实现吗？每次点击浏览都能触发吗？

我正在使用bootstrap实现来更新默认浏览按钮.

 <span class="useBootstrap btn btn-default btn-file">
                Browse <input type="file"  />
            </span>

我正在使用(ngImgCrop)裁剪图像,然后使用(angular-file-upload)将裁剪后的图像上传到服务器.

我可以从ngImgCrop中的"on-change"选项中获取$ dataURI.但我需要一个File instace来调用$ upload.如何获取裁剪图像的File实例以便上传:

        $scope.upload = $upload.upload({
            url: '/api/fileupload',
            file: [**file cropped here**]
        }).progress(function (evt) {
            //
        }).success(function (data, status, headers, config) {
            //
        });

我仍然对上传文件的不同方法感到困惑.后端服务器不受我的控制,但我可以使用Swagger页面或Postman上传文件.这意味着服务器运行正常.但是当我使用AngularJS进行上传时,它不起作用.

以下是使用Postman进行测试的方法.我只是用form-data:

请注意,请求标头将Content-Type作为multipart/form-data.但Request Payload有filename,Content-Type为image/png.

这是我的代码:

$http({
  method: 'POST',
  url: ApiUrlFull + 'Job/Item?smartTermId=0&name=aaa1&quantity=1&ApiKey=ABC',
  headers: { 'Content-Type': undefined },
  transformRequest: function(data) { 
    var fd = new FormData();
    fd.append('file', params.imageData);
    return fd; 
  }
})

params只是一个文件url的对象imageData.

我的代码也发送类似的URL参数(所以我们可以忽略导致问题).但请求有效负载是base64,它看起来不同,因为它缺少该filename字段.

我对后端没有控制权,它是用.NET编写的.

所以我想我的问题是:使用Angular($ http或$ resource),如何修改请求,以便我发送正确的Request Payload,就像Postman一样？我无法弄清楚如何对此进行逆向工程.

我试过这个https://github.com/danialfarid/ng-file-upload,它实际上在POST之前先做了OPTIONS请求(假设CORS问题).但服务器为OPTIONS提供了405错误.

我正在使用这个模块,https://github.com/nervgh/angular-file-upload

我正在使用他们的简单示例,http://nervgh.github.io/pages/angular-file-upload/examples/simple/

当您单击"选择文件"按钮时,它将打开一个窗口,允许我们选择要上载的文件.我想要发生的是只允许点击特定的文件扩展名.是否有未记录的配置可以做到这一点？

例如,在配置中,我们只允许.txt扩展名,当我点击"选择文件"按钮时,它会打开一个窗口并显示所有文件.但是,将禁用没有扩展名.txt的文件.

出于安全考虑,我不是这样做的.我只是按照提供的设计/说明进行操作.:)我总是可以使用mitm工具拦截并允许上传其他扩展.

是否可以使用angular file upload插件将文件作为八位字节流上传？我手动将标题中的内容类型设置为"application/octet-stream",但上传者不验证它自己的标题.

正文总是形式数据:

------WebKitFormBoundaryGgizqnvAqFRXn2HB
Content-Disposition: form-data; name="file"; filename="53f60e5267c2460000623dcd.wav"
Content-Type: audio/wav


------WebKitFormBoundaryGgizqnvAqFRXn2HB-- 

是否有可能将上传设置为八位字节流？我上传到的服务器不支持表单数据.

我正在使用它来允许用户选择并上传文件:

<input id="fileInput" type="file" ng-file-select="onFileSelect($files)">

这正确显示:

当用户点击"上传"时,我会上传该文件.

当用户单击"删除"时,如何清除文件名？

我正在使用MEAN.JS(https://github.com/meanjs/mean)和angular-file-upload(https://github.com/danialfarid/angular-file-upload).

MEAN.JS提供的"Article"样本包含两个名为"title"和"content"的字段.我想修改它并添加一个"图片"字段,允许用户上传图片.

我知道我必须在MEAN.JS中修改3个文件:

~myproject/app/models/article.server.model.js 
~myproject/public/modules/articles/controllers/articles.client.controller.js
~myproject/public/modules/articles/views/create-article.client.view.html

但是,我无法成功修改它们.

我正在提交一个包含字段title和description使用的表单,http.post它工作正常.我还允许用户使用相机拍摄照片并将其保存为base64格式的字符串.我需要通过相同的POST请求将此照片提交给服务器.我怎样才能做到这一点？到目前为止,我的代码如下所示,服务器在名为"photo"的字段中查找上传的照片:

headers = new Headers({'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'});
options = new RequestOptions({ headers: this.headers });

let data = {
  title: item.title,
  description: item.description
};

let params = new URLSearchParams();
for(let key in data){
    params.set(key, data[key]) 
}

this.http.post('http://example.com/items', params.toString(), this.options).subscribe(
  (result) => {
    console.log("success!");
  },
  (err) => {
    console.log(JSON.stringify(err));
  }
);