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; },
代码略粗糙,标红处比较要紧。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
2016-11-07 vue.js学习(2)