cari
Rumahhujung hadapan webtutorial jsAngularJS怎么上传文件?angularjs上传功能的详细介绍

本篇文章主要讲述的是关于angularjs的上传文件的功能,angularjs的文件怎么上传你都知道吗?angularjs是前台页面,后台使用的是什么你知道吗,现在来看这篇文章吧

使用AngularJS上传文件

  • 前台是Angular页面

  • 后台使用SpringBoot/SpirngMVC


上传文件

  • html

<p>
    <input id="fileUpload" type="file" />
    <button ng-click="uploadFile()">上传</button></p>
  • js

        $scope.upload = function(){
            var form = new FormData();            var file = document.getElementById("fileUpload").files[0];
            form.append(&#39;file&#39;, file);            $http({
                method: &#39;POST&#39;,
                url: &#39;/upload&#39;,
                data: form,
                headers: {&#39;Content-Type&#39;: undefined},
                transformRequest: angular.identity
            }).success(function (data) {
                console.log(&#39;upload success&#39;);
            }).error(function (data) {
                 console.log(&#39;upload fail&#39;);
            })
        }

注意:

  • AngularJS默认的'Content-Type'application/json ,通过设置'Content-Type': undefined,这样浏览器不仅帮我们把Content-Type 设置为 multipart/form-data,还填充上当前的boundary

  • 如果手动设置为:'Content-Type': multipart/form-data,后台会抛出异常:the request was rejected because no multipart boundary was found

  • boundary 是随机生成的字符串,用来分隔文本的开始和结束

  • 通过设置 transformRequest: angular.identityanjularjs transformRequest function 将序列化我们的formdata object,也可以不添加

  • 后台

    @RequestMapping("/upload")    public void uploadFile(@RequestParam(value = "file" , required = true) MultipartFile file) {        //deal with file
    }

注意

  • 文件必须通过@RequestParam注解来获取,且需指定value才能获取到

  • 这样就完成了上传文件


上传文件的同时传递其他参数

  • html

    <p>
        <input id="fileUpload" type="file" />
        <button ng-click="ok()">上传</button><br>
        <input ng-model="user.username" />
        <input ng-model="user.password" />
    </p>
  • js

    $scope.ok = function () {
        var form = new FormData();        var file = document.getElementById("fileUpload").files[0];   
        var user =JSON.stringify($scope.user);

        form.append(&#39;file&#39;, file);
        form.append(&#39;user&#39;,user);        $http({
            method: &#39;POST&#39;,
            url: &#39;/addUser&#39;,
            data: form,
            headers: {&#39;Content-Type&#39;: undefined},
            transformRequest: angular.identity
        }).success(function (data) {
            console.log(&#39;operation success&#39;);
        }).error(function (data) {
            console.log(&#39;operation fail&#39;);
        })
    };
  • 注意

    • 需要将Object转为String后在附加到form上,否则会直接被转为字符串[Object,object]

    @RequestMapping("/upload")    public Map<String, Object> upload(@RequestParam(value = "file") MultipartFile file, @RequestParam(value = "user", required = true) String user) {        try (FileInputStream in = (FileInputStream) headImg.getInputStream();
             FileOutputStream out = new FileOutputStream("filePathAndName")) {            //将Json对象解析为UserModel对象
            ObjectMapper objectMapper = new ObjectMapper();
            UserModel userModel = objectMapper.readValue(user, UserModel.class);            //保存文件到filePathAndName
            int hasRead = 0;            byte[] bytes = new byte[1024];            while ((hasRead = in.read(bytes)) > 0) {                out.write(bytes, 0, hasRead);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

注意

  • ObjectMappercom.fasterxml.jackson.databind.ObjectMapper

使用AngularJS上传文件

本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。

Atas ialah kandungan terperinci AngularJS怎么上传文件?angularjs上传功能的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

angular学习之详解状态管理器NgRxangular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

浅析angular中怎么使用monaco-editor浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

项目过大怎么办?如何合理拆分Angular项目?项目过大怎么办?如何合理拆分Angular项目?Jul 26, 2022 pm 07:18 PM

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

聊聊自定义angular-datetime-picker格式的方法聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

聊聊Angular Route中怎么提前获取数据聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

浅析Angular中的独立组件,看看怎么使用浅析Angular中的独立组件,看看怎么使用Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual