Wie lade ich Dateien in AngularJS hoch? Detaillierte Einführung in die Upload-Funktion von AngularJS

In diesem Artikel geht es hauptsächlich um die Datei-Upload-Funktion von AngularJS. Wissen Sie, wie man Dateien in AngularJS hochlädt? Angularjs ist die Frontend-Seite. Wissen Sie, was im Backend verwendet wird? >

Das Frontend ist die

Seite

AngularJS

und das Backend verwendet

• Angular

zum Hochladen von Dateien

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

Hinweis:

• Der Standardwert
von AngularJS ist

. Durch die Einstellung von

hilft uns der Browser nicht nur,

auf

zu setzen, sondern auch auszufüllen das aktuelle

,

• 'Content-Type'application/jsonBei manueller Einstellung auf: 'Content-Type': undefined wird eine Ausnahme im Hintergrund ausgelöst: Content-Typemultipart/form-databoundary

• ist eine zufällig generierte Zeichenfolge, die zum Trennen von Textanfang und -ende verwendet wird.

  'Content-Type': multipart/form-datathe request was rejected because no multipart boundary was found

  Durch Festlegen von
serialisiert
• unser

  oder ohne das Hinzufügen von boundary

• transformRequest: angular.identityanjularjs transformRequest functionBackendformdata object

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

Hinweis

• Die Datei muss über die Annotation @RequestParam abgerufen werden. Und Sie müssen den abzurufenden Wert angeben

• Damit ist der Upload der Datei abgeschlossen

Datei beim Übergeben anderer Parameter

• 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');
          })
      };

• Hinweis

Sie müssen das Objekt in einen String konvertieren bevor Sie es an das Formular anhängen, andernfalls wird es direkt in Zeichen umgewandelt. String [Objekt, Objekt]

• 
  

• Backend (wenn Sie möchten Um mehr zu sehen, besuchen Sie die chinesische PHP-Website

  AngularJS Development Manual
Mittelschule)

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

• Beachten Sie, dass

ist

• Verwenden Sie ObjectMapper, um Dateien hochzuladencom.fasterxml.jackson.databind.ObjectMapper

Dieser Artikel endet hier (falls Sie Wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website

AngularJS-Benutzerhandbuch

Study). Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

AngularJS

Das obige ist der detaillierte Inhalt vonWie lade ich Dateien in AngularJS hoch? Detaillierte Einführung in die Upload-Funktion von AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!