AngularJs 文件上传(实现Multipart/form-data 文件的上传)

复制代码
复制代码
<!-- 上传yml文件 -->
<div class="blackBoard" ng-show="vm.showUpop==true"></div>
<div class="updaYMLpop" ng-show="vm.showUpop==true">
    <div class="title">新建服务容器<span ng-click="vm.showUpop=false">×</span></div>
    <ul>
        <li>选择节点:<select ng-model="nodeInf" ng-options="n.addr for n in vm.nodeInf" ng-change="vm.nodeSele=nodeInf">
        </select></li>
        <li>指定路径:<input type="text" placeholder="请输入路径信息" class="ymLJ"></li>
        <li>选择文件:<a href="javascript:;" class="file">文件
        <input type="file" name="" id="" onchange="angular.element(this).scope().uploadDoc(this.files)">
        </a></li>
    </ul>
    <div class="upbtn">
        <button ng-click="vm.showUpop=false">取消</button>
        <button class="upymBtn">添加</button>
    </div>
</div>
复制代码
控制器:
复制代码
// 上传yml文件
        $scope.uploadDoc = function (files) {
            var fileLength = files[0].name.length;
            var subName = files[0].name.slice(fileLength-4,fileLength);
            if(subName!='.yml'){
                alert("请上传yml格式文件");
            } else{
                var oFReader = new FileReader();
                var form = new FormData();
                var file = files[0];
                form.append('file', file);

                var setData = {};
                setData.node = Base64.encode(vm.nodeSele.addr);
                setData.path = $(".updaYMLpop .ymLJ").val();
                setData.file = file;
                $(".updaYMLpop .file").text(files[0].name);
                $(".upymBtn").bind("click",function(){
                    console.log(setData);
                    ContainerService.updateYml(setData,form)
                    .then(function(data) {
                        console.log(data);
                        // vm.refresh();
                    }, function(data) {
                        // console.log(data);
                        vm.error = data.data;
                    });
                    vm.showUpop=false;
                })
            }
        }
复制代码
updateYml: function(setData,fileOb) {
    var promise = $http.post('/api/containers/ymldeploy?path='+setData.path+'&nodeaddr='+setData.node, fileOb, {
                    withCredentials: true,
                    headers: {'Content-Type': undefined },
                    transformRequest: angular.identity})
                .then(function(response) {
                    console.log(response);
                    // return response.data;
                    return response;
                });
                return promise;
            },    
复制代码

代码略粗糙,标红处比较要紧。

posted @   Redchar  阅读(3632)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天:
2016-11-07 vue.js学习(2)
点击右上角即可分享
微信分享提示