How to upload files in AngularJS? Detailed introduction to angularjs upload function

This article mainly talks about the function of uploading files in angularjs. Do you know how to upload files in angularjs? Angularjs is the front-end page. Do you know what is used in the background? Now let’s read this article

UseAngularJSUpload files

• The frontend isAngularPage

• The background usesSpringBoot/SpirngMVC

---

Upload file

• 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('file', file);            $http({
                method: 'POST',
                url: '/upload',
                data: form,
                headers: {'Content-Type': undefined},
                transformRequest: angular.identity
            }).success(function (data) {
                console.log('upload success');
            }).error(function (data) {
                 console.log('upload fail');
            })
        }

Note:

• The default 'Content-Type' of AngularJS is application/json, by setting 'Content -Type': undefined, so the browser not only helps us set Content-Type to multipart/form-data, but also fills in the current boundary,

• ##If manually set to:

  'Content-Type': multipart/form-data, an exception will be thrown in the background: the request was rejected because no multipart boundary was found

• boundary is a randomly generated string used to separate the beginning and end of text

• By setting

  transformRequest: angular.identity, anjularjs transformRequest function will serialize our formdata object, or you can not add

• Backend

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

Note

• The file must pass @RequestParam annotation to get it, and you need to specify the value to get it

• This completes the uploading of the file

---

Pass other parameters while uploading the file

• 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('file', file);
        form.append('user',user);        $http({
            method: 'POST',
            url: '/addUser',
            data: form,
            headers: {'Content-Type': undefined},
            transformRequest: angular.identity
        }).success(function (data) {
            console.log('operation success');
        }).error(function (data) {
            console.log('operation fail');
        })
    };

• Note

  
  

• You need to convert the Object to String before attaching it to the form, otherwise It will be directly converted into a string [Object, object]

• backend (if you want to see more, go to the PHP Chinese website

  Learn from AngularJS Development Manual)

    @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();
        }
    }

Note

• ObjectMapper is com .fasterxml.jackson.databind.ObjectMapper

Use

AngularJSUpload files

This article The article ends here (if you want to see more, go to the PHP Chinese website

AngularJS User Manual to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to upload files in AngularJS? Detailed introduction to angularjs upload function. For more information, please follow other related articles on the PHP Chinese website!