Angular Js文件上传之form-data


Posted in Javascript onAugust 28, 2015

前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular。其中有许多小坑陆陆续续踩起走。今天就遇到一个比较常见的问题:图片上传。

主题:图片上传服务器,然后通过服务器传阿里云。

不废话了直接贴前端代码:

$http({
method: ‘POST‘,

url: ‘/wechatapp/User/setAvatar‘,
  data: data,
  headers: {
    ‘Content-Type‘: undefined
  },
  transformRequest: function(data) {
    var formData = new FormData();
    formData.append(‘avatar_data‘, data.adata);
    formData.append(‘avatar_file‘, data.file);
    return formData;
  },
  data: {
    adata: scope.avatar_data,
    file: scope.avatar_file
  }
  }).success(function(d) {
    //请求成功
    cb(d);
  }).error(function(err, status) {
    console.log(err);
    cb(err);
  });

其实没神马难点,主要是取消post默认的Content-Type,然后已FormData的方式上传。一般ajax上传文件都是以FormData方式传。

以上就是本文给大家介绍Angular Js文件上传之form-data,希望大家喜欢。

Javascript 相关文章推荐
js事件冒泡实例分享(已测试)
Apr 23 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
jquery提示效果实例分析
Nov 25 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 #Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 #Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 #Javascript
js实现显示当前状态的导航效果代码
Aug 28 #Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 #Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 #Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 #Javascript
You might like
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
js异常捕获方法介绍
2013/04/10 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python回调函数用法实例详解
2015/07/02 Python
python逆序打印各位数字的方法
2018/06/25 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
详解爬虫被封的问题
2019/04/23 Python
numpy.where() 用法详解
2019/05/27 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
浅析Python 多行匹配模式
2020/07/24 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
关于教师节的广播稿
2014/09/10 职场文书
告知书格式
2015/07/01 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
800字作文之大雪
2019/12/04 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
Python中requests库的用法详解
2022/06/05 Python