Angular Js文件上傳之form-data

更新時間：2015年08月28日 11:34:00 投稿：mrr

angular-file-upload 是一個基于HTML5技術的文件上傳輕量級 AngularJS指令（directive），當瀏覽器不支持時轉(zhuǎn)為采用 FileAPI polyfill技術實現(xiàn)(基于Flash)。本文主要給大家介紹Angular Js文件上傳之form-data，需要的朋友可以參考下

前言：很久沒更新博客，最近公司pc端技術選型用angular,這幾天就趕鴨子上架，硬著頭皮直接上手angular。其中有許多小坑陸陸續(xù)續(xù)踩起走。今天就遇到一個比較常見的問題：圖片上傳。

主題：圖片上傳服務器，然后通過服務器傳阿里云。

不廢話了直接貼前端代碼：

$http({
　　method: ‘POST‘,
　　url: ‘/wechatapp/User/setAvatar‘,
  data: data,
  headers: {
    ‘Content-Type‘: undefined
  },
  transformRequest: function(data) {
    var formData = new FormData();
    formData.append(‘a(chǎn)vatar_data‘, data.adata);
    formData.append(‘a(chǎn)vatar_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方式傳。

以上就是本文給大家介紹Angular Js文件上傳之form-data，希望大家喜歡。

您可能感興趣的文章:

基于JavaScript定位當前的地理位置
這篇文章主要為大家詳細介紹了基于JavaScript定位當前的地理位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
JavaScript 上傳文件限制參數(shù)案例詳解
這篇文章主要介紹了JavaScript 上傳文件限制參數(shù)案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-09-09
javascript設計模式 – 中介者模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 中介者模式,結(jié)合實例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下
2020-04-04
在百度搜索結(jié)果中去除掉一些網(wǎng)站的資料(通過js控制不讓顯示)
這篇文章主要介紹了在百度搜索結(jié)果中去除掉一些網(wǎng)站的資料(通過js控制不讓顯示),需要的朋友可以參考下
2017-05-05
js實現(xiàn)獲取最新本周周一開始的日期（單周日歷卡）
這篇文章主要為大家介紹了js實現(xiàn)獲取最新本周周一開始的日期（單周日歷卡）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-10-10
JS連連看源碼完美注釋版(推薦)
連連看最難的部分應該是路徑搜索，即鼠標點的兩點之間看有無可通的路徑。看過有人寫的遞歸寫法，心里癢癢，就捉摸了一下，發(fā)現(xiàn)不用遞歸的情況下難度也不大
2013-12-12
禁止你的左鍵復制實用技巧
左鍵復制對于所有人來說有好有壞，例如原創(chuàng)內(nèi)容就不想被別人復制，接下來介紹一種方法，有需要的朋友可以參考下
2013-01-01
小程序開發(fā)實戰(zhàn)指南之封裝自定義彈窗組件
最近在做公司的小程序項目,發(fā)現(xiàn)設計上有很多不統(tǒng)一,代碼上有很多冗余,下面這篇文章主要給大家介紹了關于小程序開發(fā)實戰(zhàn)指南之封裝自定義彈窗組件的相關資料,需要的朋友可以參考下
2022-11-11
JS手寫一個自定義Promise操作示例
這篇文章主要介紹了JS手寫一個自定義Promise操作,結(jié)合實例形式分析了JS自定義Promise的實現(xiàn)與使用相關操作技巧,需要的朋友可以參考下
2020-03-03
js實現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能
這篇文章主要為大家詳細介紹了js實現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11