【不用原生上传图片方法，angularjs有没有上传图片方法 _file-upload 】

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

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

file-upload

详细描述

截图

代码

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="配图预览区">

编辑于2025-04-04