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. 【PSR规范专题(1)】PSR-0+namespace+spl_autoload_register实现框架模型

    了解命名空间 namespace是PHP5.3版本加入的新特性,用来解决在编写类库或应用程序时创建可重用的代码如类或函数时碰到的两类问题: 用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/ ...

  2. SpringMVC学习总结(五)——SpringMVC文件上传例子

    这是用的是SpringMVC-3.1.1.commons-fileupload-1.2.2和io-2.0.1 首先是web.xml <?xml version="1.0" e ...

  3. 使用apt-fast 来加速你的Ubuntu 的apt

    使用apt-fast 来加速你的Ubuntu 的apt sudo add-apt-repository ppa:apt-fast/stable sudo apt-get update sudo apt ...

  4. 3.Spring-用反射模拟IoC

    1.BeanFactory.java package com.jike.spring.chapter03.reflect; import java.io.InputStream; import jav ...

  5. QString->string->wstring->LPCWSTR

    QFileInfo info("./records.db"); std::string str = info.absoluteFilePath().toStdString(); / ...

  6. iOS ARC下dealloc过程及.cxx_destruct的探究

    前言 这次探索源自于自己一直以来对ARC的一个疑问,在MRC时代,经常写下面的代码: 1 2 3 4 5 6 7 8 9 - (void)dealloc {     self.array = nil; ...

  7. shell 数学计算

    每次都找不到一个好的方法来执行shell中的变量计算. 前段时间忘了在哪发现一个好的方法.在此记录下来. 申请变量: value=0; 变量加减: value=$[$value+1] 变量乘除: va ...

  8. BNU OJ 33691 / LA 4817 Calculator JAVA大数

    留着当个模板用,在BNU上AC,在LA上RE……可能是java的提交方式不同??? 数和运算符各开一个栈. 表达式从左到右扫一遍,将数存成大数,遇到数压在 数的栈,运算符压在 运算符的栈,每当遇到右括 ...

  9. CMMI 配置管理

    配置库的相关知识 通过建立物理配置库的设立规范.各配置库目录的设立原则,确保配置库的统一与规范,确保项目产品得到有效的管理与运用,提高资源的共享与利用:通过 变更管理活动,保证产品的完整.正确.一致, ...

  10. How to upgrade boost libary using apt-get ?

    apt-get install libboost1.55-all-dev using version number between boost and all, but the preconditio ...