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. 移植 FFMPEG-2.2.4 -(编译)

    源码下载:http://www.ffmpeg.org/download.html编译安装: http://trac.ffmpeg.org/wiki/CompilationGuide/Ubuntu su ...

  2. Sina App Engine(SAE)入门教程(2)-Mysql使用

    如果你还没有SAE的账号,请在http://sae.sina.com.cn 注册新用户.具体的注册流程请参见:Sina App Engine(SAE)入门教程(1)在常规的环境下,我们可以通过http ...

  3. 从一点儿不会开始——Unity3D游戏开发学习(二) ——GUI控件之Button

    一些废话 我在上一篇“一点儿不会”的系列随笔中说大概一周会发个2~3篇关于Unity的学习笔记.可这就两周过去了,我还停留在一篇的进度上,主要是这两周发生了一些事情导致我更新缓慢.其实截至目前为止,上 ...

  4. 47. Permutations II

    题目: Given a collection of numbers that might contain duplicates, return all possible unique permutat ...

  5. python基础 - 文件读写

    完成功能: 从指定位置读文件到控制台 #! /usr/bin/python # coding=utf- 方法一. try: f = open ('/root/python/file/001.txt', ...

  6. shell编程基础(3)条件判断语句

    1,带参数的shellscript #this is program build 5.11 to test shell script ############ cxz ####### 5.11 ### ...

  7. C++仿函数(functor)详解

    C++仿函数(functor)详解 所谓的仿函数(functor),是通过重载()运算符模拟函数形为的类. 因此,这里需要明确两点: 1 仿函数不是函数,它是个类: 2 仿函数重载了()运算符,使得它 ...

  8. IOS数据类型

    id – 动态对象类型.动态类型和静态类型对象的否定词汇为 nil. Class – 动态类的类型.它的否定词汇为 Nil.SEL – 选择器的数据类型(typedef):这种数据类型代表运行时的一种 ...

  9. [HIHO1184]连通性二·边的双连通分量(双连通分量)

    题目链接:http://hihocoder.com/problemset/problem/1184 题意裸,写个博客记下输出姿势. /* ━━━━━┒ギリギリ♂ eye! ┓┏┓┏┓┃キリキリ♂ mi ...

  10. Eclipse中Python插件PyDev的安装与配置流程

    安装PyDev插件的两种安装方法: 方法1.下载地址:http://sourceforge.net/projects/pydev/files/,将下载的PyDev解压(目前最新版本 PyDev 4.5 ...