angular form-data文件上传

  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。

时间: 2024-10-21 10:28:44

angular form-data文件上传的相关文章

form里面文件上传并预览

其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的链接弹出上传页面,上传文件,上传完毕再返回表单页面:这种比较简单,其实就是表单页面的上传按钮仅仅是一个链接,仅用于打开上传文件的弹出页面: 方式二:就是表单里面有<input type="file" name="picture"/>,点击上传按钮后,会在上传

Jquery form.js文件上传返回JSON数据,在IE下提示下载文件的解决办法,并对返回数据进行正确的解析

Jquery from.js插件上传文件非常方便,但是在ie10以下的版本会弹出下载文件对话框 解决方法: 1.在服务端设置response.setContentType("text/plain"); 2.对返回数据正确解析                这时返回的数据不再是json,不能使用解析json的方法进行解析                       var data1=eval("(" + data+ ")");  //将返回的字符

libCurl的文件上传

最近在需要使用curl的上传功能,使用libCurl来实现.因此,先使用curl命令操作,然后再使用libCurl实现. 基于Http协议的文件上传的标准方法是: 基于POST Form的文件上传  RFC1867. 这个方法使用非常广泛,这个RFC规定了FORM上传文件的标准方法,如下介绍了基于libcurl来开发upload功能. 开发实现过程 1. 使用curl 命令行执行代码,  2. 跟踪分析 curl的request和response, 3.使用libCurl的API进行开发实现 0

MultipartFile实现单文件和多文件上传并带参数

什么是MultipartFile MultipartFile是spring类型,代表HTML中form data方式上传的文件,包含二进制数据+文件名称.[来自百度知道]   方法总结 byte[] getBytes() 以字节数组的形式返回文件的内容. String getContentType 返回文件的内容类型. FileItem getFileItem() 返回底层的org.apache.commons.fileupload.FileItem实例. InputStream getInpu

MultipartFile文件上传的实例

什么是MultipartFile MultipartFile是spring类型,代表HTML中form data方式上传的文件,包含二进制数据+文件名称.[来自百度知道]   方法总结 byte[] getBytes() 以字节数组的形式返回文件的内容. String getContentType 返回文件的内容类型. FileItem getFileItem() 返回底层的org.apache.commons.fileupload.FileItem实例. InputStream getInpu

十、Django的文件上传

一.上传文件相关 请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有3种: application/x-www-form-urlencoded 最常见的 POST 提交数据的方式了 浏览器的原生 form 表单,如果不设置?enctype?属性,那么最终就会以 默认格式application/x-www-form-urlencoded 方式提交数据,ajax默认也是这个 urlencoded是一种数据格式, 比如: username=yang&passwo

struts2文件上传(单文件/批量添加)

单文件上传 1.导入上传需要jar包 2.建立UploadAction file是jsp页面的输入项的name相同,后面的两个属性的名称也是有规律的:(inputName+FileName/ContentType) 1 public class UploadAction extends ActionSupport{ 2 3 private static final long serialVersionUID = 1L; 4 private File file;//上传文件的本身 5 privat

JavaWeb之文件上传、下载

时间:2016-12-17 18:07 --文件上传概述 上传不能使用BaseServlet 1.文件上传的作用    例如网络硬盘,就是用来上传和下载文件的. 2.文件上传对表单的限制    1)必须使用表单,而不能是超链接    2)表单的method必须是POST,而不能是GET    3)表单的enctype必须是multipart/form-data    4)在表单中添加type="file",即<input type="file" name=&q

走进Struts2(六)— 文件上传和下载

一.文件上传 实现文件上传的方式有很多种,比如Apache的Common-FileUpload,但是实现起来非常的繁琐,而Struts2来实现文件上传则简单的多,默认也是基于Common-FileUpload的方式. 1.使用Struts2来实现文件上传,需要使用Struts2预定义的fileUpload拦截器,defaultStack拦截器栈引用了fileUpload拦截器:最后,struts-default包又将defaultStack拦截器声明为自己的默认拦截器引用.使用defaultSt

PHP三种方法实现多文件上传

今天一个网介绍三种多文件上传的方法,前两种都是直接遍历三维超全局数组$_FILES,最后一种是先定义一个单文件上传函数,再循环调用该函数,完成多文件的上传. 方法一:当多文件上传表单中多个上传文件的name属性为“pic[]”形式时,也即表单为这种形式. HTML代码: <form action="" method="post"enctype="multipart/form-data"> <input type="hi