angular form-data文件上传
- 前言:很久没更新博客,最近公司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方式传。这点不难,主要是新手处理问题。
下面推荐一个比较不错的图片截取插件:cropper,源码地址:https://github.com/fengyuanchen。
angular form-data文件上传的更多相关文章
- python 处理form/data文件上传
处理multipart/form-data 的java serverlet请求接口通过python实现 记住不要在头加:"Content-Type":"multipart ...
- 利用Formdata实现form提交文件上传不跳转页面
作者:幻月九十链接:https://www.zhihu.com/question/19631256/answer/119911045来源:知乎著作权归作者所有,转载请联系作者获得授权. $('form ...
- js 使用jquery.form.js文件上传
1.文件上传,使用jquery.form.js插件库 <!DOCTYPE html> <html> <head> <meta charset="UT ...
- form里面文件上传并预览
其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的 ...
- Java如何解决form表单上传文件,以及页面返回处理结果通知!
前端JSP代码 <form id='formSumbit' class='form-horizontal' action='/ncpay/route/chlsubmcht/batchImpor' ...
- form表单文件上传提交且接口回调显示提交成功
前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...
- libCurl的文件上传
最近在需要使用curl的上传功能,使用libCurl来实现.因此,先使用curl命令操作,然后再使用libCurl实现. 基于Http协议的文件上传的标准方法是: 基于POST Form的文件上传 ...
- 利用Bootstrap简单实现一个文件上传进度条
© 版权声明:本文为博主原创文章,转载请注明出处 说明: 1. 使用commons-fileupload.jar实现文件上传及进度监听 2. 使用bootstrap的进度条进行页面显示 3. 因为进度 ...
- struts2实现文件上传(多文件上传)及下载
一.要实现文件上传,需在项目中添加两个jar文件 二.上传准备的页面 注:必须植入enctype="multipart/form-data"属性,以及提交方式要设置成post &l ...
- 《Play for Java》学习笔记(六)文件上传file upload
一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...
随机推荐
- PHP输入流php://input [转]
对于php://input介绍,PHP官方手册文档有一段话对它进行了很明确地概述. "php://input allows you to read raw POST data. It is ...
- Qt源码分析之QObject
原文:http://blog.csdn.net/oowgsoo/article/details/1529284 我感觉oowgsoo兄弟写的分析相当透彻,赞! 1.试验代码: #include < ...
- vc2005中没有classwizard这个命令
vc2005中没有classwizard这个命令了 2005下怎么添加鼠标事件 vc2005中没有classwizard这个命令了 取代classwizard 中的添加消息映射,添加类,等等的功能主要 ...
- AO创建IFeature的两种方法
原文地址:http://www.cnblogs.com/MyLucifer/archive/2010/12/01/1893212.html 在ArcGIS Resouce Center中,ESRI介绍 ...
- 利用PhantomJS搭建Highcharts export服务
利用PhantomJS搭建Highcharts export服务 一直在使用Highcharts做web图表的展示, 但是当发送定时的报表邮件的遇到了这个问题. 为了保证邮件图表和web页图表样式一致 ...
- android4.4内核移植
01 init/目录下Kconfig修改: 956行添加: config PANIC_TIMEOUT int "Default panic timeout" help Set de ...
- andorid源码中察看版本
build\core\version_defaults.mk //搜索该文件中的 PLATFORM_VERSION值
- ConcurrentDictionary和Dictionary
http://stackoverflow.com/questions/6739193/is-the-concurrentdictionary-thread-safe-to-the-point-that ...
- 使用netcat进行反弹链接的shellcode
from:http://morgawr.github.io/hacking/2014/03/29/shellcode-to-reverse-bind-with-netcat/ 这篇文章主要是谈,在远程 ...
- sdut 2831 Euclid (几何)
题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2831 题意:给a, b, c, d, ...