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. 欧拉工程第71题:Ordered fractions

    题目链接:https://projecteuler.net/problem=71 If n<d and HCF(n,d)=1, it is called a reduced proper fra ...

  2. 苹果操作系统Mac OS X

    OS X 是先进的操作系统.基于坚如磐石的 UNIX 基础,设计简单直观,让处处创新的 Mac 安全易用,高度兼容,出类拔萃. UNIX 之威力,Mac 之简单OS X 既简单易用且功能强大.所有的一 ...

  3. C++工具系列博文合集

    http://www.cnblogs.com/itech/category/240779.html

  4. 一个不错的log4j.properties例子

    # Set root logger level to WARN and append to stdout #在开发环境下日志级别要设置成DEBUG,生产环境设置成info或error log4j.ro ...

  5. spring cloud config 入门

    简介 Spring cloud config 分为两部分 server client config-server 配置服务端,服务管理配置信息 config-client 客户端,客户端调用serve ...

  6. EINTR错误

    慢系统调用(slow system call):此术语适用于那些可能永远阻塞的系统调用.永远阻塞的系统调用是指调用有可能永远无法返回,多数网络支持函数都属于这一类.如:若没有客户连接到服务器上,那么服 ...

  7. Hibernate检索方式 分类: SSH框架 2015-07-10 22:10 4人阅读 评论(0) 收藏

    我们在项目应用中对数据进行最多的操作就是查询,数据的查询在所有ORM框架中也占有极其重要的地位.那么,如何利用Hibernate查询数据呢?Hibernate为我们提供了多种数据查询的方式,又称为Hi ...

  8. MemSQL start[c]up Round 2 - online version(DP)

    只有小写字母 那>=2600的直接找单字母串长度大于等于100的就可以了 <2600 的dp找最长回文串 #include <iostream> #include<cst ...

  9. 使用截图方式将Excel导出为PNG图片的不可行性

    博主前面一篇文章使用了JAVA的Robot机制 模拟打开Excel然后Robot移动到指定区域,截图并生成PNG格式图片 试图使用这种方式将复杂的Excel报表转化成无差别的PNG图片 但是这种方式遇 ...

  10. iOS开发:在Xcode中用Pods管理第三方库

    之前写了一篇 iOS开发:在Swift中调用oc库 ,今天记录一下如何用Pods的方式来管理第三方库,包括Swift/Object-C的库. 在这之前请先查阅Guides.CocoaPods如何使用的 ...