IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

亚马逊运营

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

获取图片信息后，用FormData发送$http请求报错

2

3

FormData $http

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//选择图片，获取图片信息
    $scope.click = function (){
        var file = $('#file').get(0).files[0];
        console.log(file);
        $scope.file = file;
    };
    //发送请求
    $scope.uploadPic = function () {
        var data = new FormData();
        data.append('file', $scope.file);
        $http({
            method: 'post',
            url: '/carrots-admin-ajax/a/u/img/task',
            data: data,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function (resp) {
            if (resp.data.code === 0) {
                console.log(resp);
                vm.params.img = resp.data.data.url;
            }
        })
    };

该问题已被官方收录

日历插件双向绑定失效

2

3

FormData

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

console.log($scope.startAt);//undefined

该问题已被官方收录

编辑接口post指定的必填参数会出现返回错误status code问题

2

2

$http

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$http({
                        method: 'PUT',
                        url: '/carrots-admin-ajax/a/u/article/' + id,
                        data: 'title=' + $scope.modelEditTitle
                        + '&status=' + $scope.modelEditStatus
                        + '&img=' + $scope.modelEditImg
                        + '&url=' + $scope.modelEditUrl
                        + '&type=' + $scope.modelEditType
                        + '&content=' + $scope.modelEditContent,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                    })
                    .then(function(xhr) {
                        console.log("编辑系统正常");
                        $state.go('backstage.list');
                    }, function() {
                        console.log("编辑系统异常，请检查相关设置");
                    });

该问题已被官方收录

上传图片，取消后，怎么再选择同一张图片？

1

2

file-upload

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var myApp = angular.module('myApp', ['angularFileUpload']);
myApp.controller('detailCtrl',function ($scope, FileUploader) {
    var uploader = $scope.uploader = new FileUploader;
    uploader.url='/carrots-admin-ajax/a/u/img/task';
    uploader.queueLimit=1;//限制上传文件个数
    uploader.queue=[];
    $scope.clearItems = function(){    //重新选择文件时，清空队列，达到覆盖文件的效果
        uploader.clearQueue();
    };
    //上传图片
    uploader.onSuccessItem = function(data,response) {  //成功上传文件
        $scope.imageSrc=response.data.url;
    };
});

该问题已被官方收录

post请求立即上线返回的数据提示发布状态不能为空

0

2

$http

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//封装的请求接口地址
        postAdd:function(){
            return '/carrots-admin-ajax/a/u/article';
        }



//封装的请求方法
            postAdd:function(params){
                return $http.post(site.postAdd(),{
                    params
                })
            }


//发起请求的数据
                $scope.params = {};
                $scope.params.title = $scope.title;
                $scope.params.type = $scope.selectedType;
                $scope.params.img = url;
                $scope.params.content = $scope.explain;
                $scope.params.url = $scope.skipUrl;
                $scope.params.status = 2;

//调用封装的post请求
                beg.postAdd($scope.params).then(function (response) {
                    console.log($scope.params);
                    console.log(response)

                })

该问题已被官方收录

如何封装上传图片指令

0

1

FormData

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

引用指令的标签
<up-load></up-load>
封装指令的HTML文件
<div class="art-form1">
    <div class="col-md-2 col-sm-2 col-xs-2 art-left">
        配       图
    </div>
    <div  class="col-md-10 col-sm-10 col-xs-10 art-r">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <label for="file" class="btn btn-primary">选择文件</label>
            <input type="file"
                   id="file"
                   accept="image/png,image/gif"
                   name="file"
                   onchange="angular.element(this).scope().fileChanged(this)"
                   style="display: none;"
                   required/>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img ng-src="{{src}}" alt="配图预览" class="art-img" width="100%"/>
        </div>
        <div class="col-md-8 col-sm-8 col-xs-8">
            <table>
                <thead>
                <tr>
                    <th>
                        图片名
                    </th>
                    <th>
                        文件大小
                    </th>
                    <th>
                        进度
                    </th>
                    <th>
                        操作
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr ng-if="fileName">
                    <td>{{fileName}}</td>
                    <td>{{fileSize|number:2}}MB</td>
                    <td>
                        <uib-progressbar value="progress" style="margin-bottom: 0;" type="null" animate="true" >{{progress}}%</uib-progressbar>
                    </td>
                    <td>
                        <span class="glyphicon glyphicon-ok" ng-show="okIcon"></span>
                        <span class="glyphicon glyphicon-remove" ng-show="removeIcon"></span>
                    </td>
                    <td>
                        <button class="art-up" data-ng-click="upload()" ng-disabled="progress">上传</button>
                        <button class="art-del" data-ng-click="delete()">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
封装指令的JS文件
myApp.directive("upLoad", function($http){
    return{
        restrict: 'EA',
        templateUrl: 'html/upload.html',
        replace: true,
        link: function(scope){
            scope.fileReader = new FileReader();
            scope.fileChanged = function(respond){
                scope.$apply(function(){
                    scope.files = respond.files[0];
                    scope.input = respond;
                    scope.fileName = scope.files.name;
                    scope.fileSize = scope.files.size/1024/1024;
                    scope.progress=0;
                });
            };
            // 上传图片
            scope.upload = function(){
                var formData = new FormData();
                scope.fileReader.readAsDataURL(scope.files);
                formData.append("file",scope.files);
                if(scope.fileSize <= 5242880){
                    $http({
                        method: 'post',
                        url: '/carrots-admin-ajax/a/u/img/task',
                        data: formData,
                        headers:{"Content-Type":undefined},
                        uploadEventHandlers: {
                            progress: function(respond){
                                scope.progress = (respond.loaded/respond.total)*100;
                            }
                        }
                    }).then(function successCallback(respond){
                        scope.status = respond.data.message;
                        scope.src = respond.data.data.url;
                        scope.okIcon=true;
                    });
                }else{
                    alert('文件大于5MB');
                    scope.removeIcon=true;
                }
            };

            //删除图片
            scope.delete = function(){
                scope.src = undefined;
                scope.fileName = '';
                scope.progress = 0;
                scope.input.value = '';// 防止删除一个文件后不能再次上传同一个文件的问题
                scope.okIcon=false;
            };
        }
    }
});

该问题已被官方收录

不用原生上传图片方法，angularjs有没有上传图片方法

0

1

file-upload

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

if (typeof FileReader === 'undefined') { //如不支持
            vm.imgTip = "抱歉，你的浏览器不支持 FileReader";
            fileInput.setAttribute('disabled', 'disabled');
        } else { //如支持
            //上传图片监听change事件:   
            $("#image-file").on('change', function () {
                vm.params.img = undefined //点击选择图片重置图片为undefined
                var file = fileInput.files[0];
                console.log(file)
                if (!fileInput.value) { //如果没选择文件
                    $scope.$apply(function () {
                        vm.infor.imgTip = "未选择图片"
                    })
                    return false;
                } else if (fileInput.value && !/image\/\w+/.test(file.type)) { //如果选择了且选择文件格式不对
                    $scope.$apply(function () {
                        vm.infor.imgTip = '不是有效的图片文件!'
                    })
                    return false;
                } else { //如果选择了正确格式文件
                    $scope.$apply(function () {
                        vm.infor.imgTip = "选择成功";
                        vm.infor.isAble = false; //上传按钮恢复颜色可用
                        vm.infor.isShow = false; //进度条恢复
                    })
                    var reader = new FileReader(); //创建一个FileReader接口
                    console.log(reader);
                    //将文件以Data URL形式读入页面
                    reader.readAsDataURL(file); //FileReader的方法，把图片转成base64
                    reader.onprogress = function (e) { //本地上传过程
                        var line = e.loaded / e.total * 100; //本机上传成功100% 
                        if (line === 100) { //如果本地上传成功
                            reader.onload = function (e) { //成功读取
                                preview.src = e.target.result; //显示重新选择的图片
                                $scope.$apply(function () {
                                    vm.infor.chooseImg = true; //操作栏显示
                                    vm.infor.imgName = file.name; //显示图片名
                                    vm.infor.imgSize = file.size; //显示图片大小
                                });
                                if (file.size > 1024 * 1024) {
                                    $scope.$apply(function () {
                                        vm.infor.imgTip = "文件过大，请重新选择";
                                        vm.infor.isAble = true; //上传按钮半透明 不可用
                                    })
                                } else {
                                    vm.up = function () { //点击上传
                                        vm.infor.isShow = true; //进度条生效 
                                        vm.infor.isAble = true; //上传按钮半透明 不可用 
                                        //以下为像后台提交图片数据
                                        var formdata = new FormData();
                                        formdata.append("file", file); // file中包含用户所选择的文件
                                        uploadService.uploadFile(formdata).then(function (res) { //成功
                                            console.log(res.data);
                                            if (res.data.code == 0) { //请求成功
                                                vm.params.img = res.data.data.url;
                                                console.log(vm.params)
                                                vm.infor.imgTip = "上传成功";
                                            }
                                        })
                                    }
                                }
                            };
                        }
                    };
                }
            });
        }

<label for="image-file" class="mybtn btn-blue">选择文件</label>
                            <input type="file" id="image-file">

                        </div>
                        <p id="file-info">{{vm.infor.imgTip}}</p>
                        <div class="col-lg-12">
                            <img id="image-preview" src={{vm.params.img}} alt="配图预览区">

该问题已被官方收录

怎样使用angularjs实现一个完整的分页？

0

1

分页

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

代码如图

该问题已被官方收录

每次路由跳转之后都http请求都会重发一次，很消耗性能，如何避免？

0

1

$http

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 request.articleList($scope.params).then(
        function (data) {
            $scope.list = data.data.data.articleList;
            $scope.totalItems = data.data.data.total;
            $scope.params.size = ($stateParams.size) ? $stateParams.size : 10;
            $scope.currentPage = $stateParams.page;
            $scope.type = $stateParams.type;
            $scope.status = $stateParams.status;
            if (typeof($stateParams.startAt) != "undefined") {
                $scope.date = parseInt($stateParams.startAt);
            }
            if (typeof($stateParams.endAt) != "undefined") {
                $scope.todate = parseInt($stateParams.endAt);
            }
        }
    );

该问题已被官方收录

浏览器控制台发出警告

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="login" ng-controller="loginctrl">
  <form name="loginForm">
    <p class="houtai">后台登录</p> <br>
    <!-- 用户名图标 -->
    <span class="glyphicon glyphicon-user name" aria-hidden="true"></span>
    <!-- 用户名输入框 -->
    <input type="text" ng-model="name" class="form-control" placeholder="请输入用户名" 
    required name="uname" ng-maxlength="16" ng-minlength="4" ng-pattern="/^\w/" size="30"><br>
    <!-- 密码图标 -->
    <span class="glyphicon glyphicon-lock word" aria-hidden="true"></span>
    <!-- 密码输入框 -->
    <input type="password" ng-model="pass" class="form-control" placeholder="请输入密码" required name="upass" ng-maxlength="18" ng-minlength="6">
    <!-- 错误信息提示框 -->
    <div class="error " ng-messages="loginForm.uname.$error" id="pro">
      <div ng-message="required">用户名不能为空</div>
      <div ng-message="minlength">用户名长度至少为4</div>
      <div ng-message="maxlength">用户名长度不能超过16</div>
      <div ng-message="pattern">用户名不符合要求</div>
      <div ng-model="info" >{{info}}</div>
    </div>
    <!-- 登录按钮 -->
    <button type="submit" ng-click="subclick()">登录</button>
  </form>
</div>


app.controller("loginctrl", function ($scope, $http, $state) {
  $scope.subclick = function () {
    $http({
      method: 'post',
      url: '/carrots-admin-ajax/a/login',
      //params属性将输入框的值以键值对的形式传给服务器
      params: {
        name: $scope.name,  
        pwd: $scope.pass,
      },
      //编码格式
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
    }).then(function (xhr) {
      console.log(xhr.data);
      if (xhr.data.code === 0) {
        $state.go("dashboard");
      } else {
        $scope.info = xhr.data.message;
      }
    })
  }
})

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1