angularjs手机webapp 利用input拍照，图库选择、缩略图显示上传图片（一）

心已赠人 2022-05-14 00:10 233阅读 0赞

运行后的截图：

![70][]

html代码

js代码

自定一个指令directive

上传函数controller

$scope.getFile = function ( file ) {
        console.info(file)
        Upload.upload({
            url : photoUrl,//上传服务的地址
            data : {//上传的数据参数
                photoFile : file
            }
        })
            .then(function ( resp ) {
                    var fileUrl = resp.data;
                     $scope.imgshows.push(fileUrl.object.showImage);
                },
                function ( resp ) {
                    console.log(resp.data, "上传失败");
                },
                function ( evt ) {//上传进度显示
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + progressPercentage + '% ');
                });
    };

删除图片函数

DeleteImg : function ( index, imgs ) {
           $scope.imgshows.splice(index, 1);
    }

图片上传成功了，剩下的就是保存你上传的图片了，这个功能很简单了，直接拿到需要保存的参数数据，调取接口，进行提交就OK啦

angular
        .module('uploadimg')
        .directive('fileModel', fileModel)
        .controller('shareCaptureCtrl', shareCaptureCtrl);

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[70]: /images/20220514/8d6437bcac1b4063a40042b099533b12.png
[20191229112121499.png]: /images/20220514/70cc526f6a284d77a71f108a345a0fb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220514/6cde17cc2bbd40e9be491137a466f251.png