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. lintcode:Add Binary 二进制求和

    题目: 二进制求和 给定两个二进制字符串,返回他们的和(用二进制表示). 样例 a = 11 b = 1 返回 100 解题: 和求两个链表的和很类似 考虑进位,考虑最后一项的进位 0+0 = 0 不 ...

  2. *[codility]Fish

    https://codility.com/demo/take-sample-test/fish 一开始习惯性使用单调栈,后来发现一个普通栈就可以了. #include <stack> us ...

  3. ZipArchive框架的文件压缩和解压

    导入第三方框架ZipArchive之后还要在系统库文件中导入一个如下文件(搜索libz出来的任何一个都可以)   导入的头文件是#import "Main.h" 文件压缩 -(vo ...

  4. OSSEC 安装执行./install.sh详细信息

    下载好ossec安装文件后解压得到如下目录 [root@localhost ~]# cd ossec-hids-/ [root@localhost ossec-hids-]# ll total drw ...

  5. Android Monkey测试

    Monkey测试1——Monkey的使用 原文地址: http://www.douban.com/note/257029872/ (转自豆瓣,版权属于豆瓣及豆瓣网友,如有冒犯请见谅并联系我们) Mon ...

  6. sql语句记录

    清空日志 DUMP TRANSACTION 库名 WITH NO_LOG 截断事务日志 BACKUP LOG 数据库名 WITH NO_LOG 收缩数据库 DBCC SHRINKDATABASE(数据 ...

  7. BZOJ 3166 Alo

    处理出每个数最靠近它的左右两个比它大的数. 然后可持久化trie. #include<iostream> #include<cstdio> #include<cstrin ...

  8. LeetCode Invert Binary Tree 反转二叉树

    思路:递归解决,在返回root前保证该点的两个孩子已经互换了.注意可能给一个Null. C++ /** * Definition for a binary tree node. * struct Tr ...

  9. 自动FTP的小脚本

    自动FTP的小脚本 使用以下脚本,可以实现自动FTP,将你需要的文件传送到需要的地方,或者将需要的文件从某个地方抓取下来. cd /PATH_YOU_WANT_TO_UPLOAD(DOWNLOAD) ...

  10. RegExp类型和text()方法

    ECMAScript通过RegExp类型来支持正则表达式 RegExp 实例方法:text() 它接受一个字符串参数,在模式与该参数匹配的情况下返回true,否则返回false,通常用在if语句中 / ...