1. 前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular。其中有许多小坑陆陆续续踩起走。今天就遇到一个比较常见的问题:图片上传。
  2. 主题:图片上传服务器,然后通过服务器传阿里云。
  3. 下面直接贴前端代码:
  1. $http({
      method: 'POST',
      url: '/wechatapp/User/setAvatar',
  2. data: data,
  3. headers: {
  4. 'Content-Type': undefined
  5. },
  6. transformRequest: function(data) {
  7. var formData = new FormData();
  8. formData.append('avatar_data', data.adata);
  9. formData.append('avatar_file', data.file);
  10. return formData;
  11. },
  12. data: {
  13. adata: scope.avatar_data,
  14. file: scope.avatar_file
  15. }
  16. }).success(function(d) {
  17. //请求成功
  18. cb(d);
  19. }).error(function(err, status) {
  20. console.log(err);
  21. cb(err);
  22. });

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

下面推荐一个比较不错的图片截取插件:cropper,源码地址:https://github.com/fengyuanchen。

angular form-data文件上传的更多相关文章

  1. python 处理form/data文件上传

    处理multipart/form-data 的java serverlet请求接口通过python实现 记住不要在头加:"Content-Type":"multipart ...

  2. 利用Formdata实现form提交文件上传不跳转页面

    作者:幻月九十链接:https://www.zhihu.com/question/19631256/answer/119911045来源:知乎著作权归作者所有,转载请联系作者获得授权. $('form ...

  3. js 使用jquery.form.js文件上传

    1.文件上传,使用jquery.form.js插件库 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  4. form里面文件上传并预览

    其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的 ...

  5. Java如何解决form表单上传文件,以及页面返回处理结果通知!

    前端JSP代码 <form id='formSumbit' class='form-horizontal' action='/ncpay/route/chlsubmcht/batchImpor' ...

  6. form表单文件上传提交且接口回调显示提交成功

    前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...

  7. libCurl的文件上传

    最近在需要使用curl的上传功能,使用libCurl来实现.因此,先使用curl命令操作,然后再使用libCurl实现. 基于Http协议的文件上传的标准方法是: 基于POST Form的文件上传  ...

  8. 利用Bootstrap简单实现一个文件上传进度条

    © 版权声明:本文为博主原创文章,转载请注明出处 说明: 1. 使用commons-fileupload.jar实现文件上传及进度监听 2. 使用bootstrap的进度条进行页面显示 3. 因为进度 ...

  9. struts2实现文件上传(多文件上传)及下载

    一.要实现文件上传,需在项目中添加两个jar文件 二.上传准备的页面 注:必须植入enctype="multipart/form-data"属性,以及提交方式要设置成post &l ...

  10. 《Play for Java》学习笔记(六)文件上传file upload

    一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...

随机推荐

  1. Python中Lambda, filter, reduce and map 的区别

    Lambda, filter, reduce and map Lambda Operator Some like it, others hate it and many are afraid of t ...

  2. ubuntu下安装pthread的manpages(man 手册) 在Ubuntu中查看STL帮助

    http://blog.csdn.net/leisure512/article/details/4881391 由于学习多线程编程,所以用到pthread,但是man的时候却发现没有pthread函数 ...

  3. 为什么开发者热衷在Stack Overflow上查阅API文档?

    摘要:一项新研究跟踪了Android开发者的访问历史,发现开发者多达二分之一的文档是从Stack Overflow上获取到的,而Stack Overflow上的示例也多于官方指南,开发者通过搜索更多时 ...

  4. GitHub最全的前端资源汇总仓库(包括前端学习、开发资源、求职面试等)

    在GitHub上收集的最全的前端资源汇总(包括前端学习.前端开发资源.前端求职面试等) 个人结合github上各位大神分享的资源进行了简单的汇总整理,每一个条目下面都有丰富的资料,是前端学习.工作的好 ...

  5. Java API —— 多线程(2)

    1.JDK5中Lock锁的使用 虽然我们可以理解同步代码块和同步方法的锁对象问题,但是我们并没有直接看到在哪里加上了锁,在哪里释放了锁,为了更清晰的表达如何加锁和释放锁,JDK5以后提供了一个新的锁对 ...

  6. swfupdate flash上传工具

    引用:http://baike.baidu.com/view/1332553.htm 下载地址:http://code.google.com/p/swfupload/ 什么是SWFUpload? SW ...

  7. C++ 中字符串标准输入的学习及实验

    声明:下面实验中[]里面表示要输入里面的符号,[]符号本身并未输入 1.cin>> cin使用空白(空格.制表符.回车)来确定字符串的结束位置. cin会将换行符留在输入输出队列中. #i ...

  8. Java Web编程的主要组件技术——JDBC

    参考书籍:<J2EE开源编程精要15讲> JDBC(Java DataBase Connectivity)是Java Web应用程序开发的最主要API之一.当向数据库查询数据时,Java应 ...

  9. OK335xS PMIC(TPS65910A3A1RSL) reset

    /*********************************************************************** * OK335xS PMIC(TPS65910A3A1 ...

  10. 如何让Vim显示dos下的^M符号

    /*********************************************************************** * 如何让Vim显示dos下的^M符号 * 声明: * ...