1. 前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular。其中有许多小坑陆陆续续踩起走。今天就遇到一个比较常见的问题:图片上传。
  2. 主题:图片上传服务器,然后通过服务器传阿里云。
  3. 下面直接贴前端代码:
$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方式传。这点不难,主要是新手处理问题。

下面推荐一个比较不错的图片截取插件: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. [hackerrank]John and GCD list

    https://www.hackerrank.com/contests/w8/challenges/john-and-gcd-list 简单题,GCD和LCM. #include <vector ...

  2. 关于Linux的时间与时区

    转:http://linux.chinaunix.net/techdoc/beginner/2007/06/22/960790.shtml 首先要说明的是我的系统是fedora,其他系统可能不完全相同 ...

  3. 开源入侵检测系统OSSEC搭建之三:Web界面安装

    注意:以下操作需在OSSEC服务端进行设置 一.下载analogi,存放于/var/www/html/下并赋予权限 [root@localhost ~]# wget https://github.co ...

  4. checkbox 全选、全不选、反选 插件

    jquery.checkbox.js: ;(function($,window,document,undefined){ $.fn.check=function(mode){ mode= mode | ...

  5. HDU 4767 Bell(矩阵+中国剩余定理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4767 题意:给出n.求n有多少种划分集合的方式,即bell(n) 思路: #include <i ...

  6. Sublime Text3中文乱码及tabs中文方块的解决方案

    一.文本出现中文乱码问题 方案1 1.打开Sublime Text 3,按Ctrl+-打开控制行,复制粘贴以下python代码,然后回车运行. 2. 复制并粘贴如下代码: import urllib. ...

  7. 面试题_93_to_102_编程和代码相关的面试题

    93)怎么检查一个字符串只包含数字?(解决方案) 94)Java 中如何利用泛型写一个 LRU 缓存?(答案<) 95)写一段 Java 程序将 byte 转换为 long?(答案) 95)在不 ...

  8. 进程间通信的WM_COPYDATA的使用

    http://blog.csdn.net/ao929929fei/article/details/6316174 接收数据的一方 ON_WM_COPYDATA() afx_msg BOOL OnCop ...

  9. poshytip两个实用示例

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> < ...

  10. 解决魅族USB调试无法被电脑识别的问题(含Mac OS X、Win7)

      每次打开豌豆荚或者360手机助手之类手机助手后Eclipse才会检测到mx4(实际上是豌豆荚关闭eclipse的adb使用自己的驱动连接的).解决方法就是在"adb_usb.ini&qu ...