AngularJs：-如何在AngularJs中动态推送图片到div并上传到服务器

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage(this.files)">
  <div ng-show="uploadedImage">
    <img ng-src="{{uploadedImage}}" alt="Uploaded Image">
  </div>
</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {
  $scope.uploadImage = function(files) {
    var formData = new FormData();
    formData.append('image', files[0]);

    $http.post('/upload', formData, {
      transformRequest: angular.identity,
      headers: {'Content-Type': undefined}
    }).then(function(response) {
      $scope.uploadedImage = response.data.imageUrl;
    }, function(error) {
      console.log(error);
    });
  };
});

var express = require('express');
var multer = require('multer');

var app = express();
var upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('image'), function(req, res) {
  // 处理上传的图片逻辑，例如保存到服务器或云存储，并返回图片URL
  var imageUrl = 'http://example.com/uploads/' + req.file.filename;
  res.json({ imageUrl: imageUrl });
});

app.listen(3000, function() {
  console.log('Server is running on port 3000');
});