上传后的图像404（未找到），但在重新编译webpack时正在工作

Question

我正在创建一个 MEAN STACK CRUD 应用程序（使用Angular CLI）。 问题：当我上传图片时，它不会在页面上显示错误： GET http://localhost:4200/assets/images/uploadedProfilePic5ac9ade58bd8213eecf2aa50.jpg 404 (Not Found)。 但是当角度重新编译webpack 时，会立即显示出来。图像上传过程没有问题。它工作正常。图像上传到应该上传的位置（src/assets/images），也没有问题。 我现在该怎么办？。

上传照片的我的服务：

//upload Picture service
  uploadProfilePic(id, file)
  {
    const req = new HttpRequest(
      'POST', 
      'http://localhost:3000/users/uploadPic/'+id, file, {
      reportProgress: true
    });

    return this.http.request(req).map(res => {return res});
  }

我的 upload-profile-pic.component.ts 文件：

onUpload(e)  
  {
    // console.log(e);

    const uploadData = new FormData();
    uploadData.append("uploadedProfilePic", this.file);

    this.auth.uploadProfilePic(this.id, uploadData).subscribe((data:any) => {

      if(data.type == 1){
        // console.log(Math.round(data.loaded*100/data.total));
        this.progressBarValue = Math.round(data.loaded*100/data.total);
      }

    setTimeout(()=>{ 
      if(data.type == 4){
        // console.log(data);
      var updateData = {avatar: "uploadedProfilePic"+this.id+'.'+this.ext};

      if(data.body.success) {
        this.auth.updateUserService(this.id, updateData).subscribe((data:any)=> {
          // console.log(data);
          if(data.success){
            this.flashMsg.show("Success: "+ data.msg, {cssClass: 'flashMessageBox', timeout: 6000});
            this.router.navigate(['/userList']);
          }else{
            this.flashMsg.show("Error: "+ data.msg, {cssClass: 'flashMessageBox', timeout: 6000});
            // this.reset();
            this.router.navigate(['/userList']);
          }
        });

      }else {
        this.flashMsg.show("Error: "+ data.body.msg, {cssClass: 'flashMessageBox', timeout: 6000});
        // this.reset();
        this.router.navigate(['/userList']);
        }
      }
    }, 2000);

    });


  }

我的用户列表html文件，其中显示图片：

<div *ngFor = "let user of usersList">
    <div class="row mb-2 mx-auto" id="showUserList">

      <div class="col-sm-2 p-0 text-center">

        <img *ngIf="!user.avatar == ''" src="{{photoBaseUrl}}/{{user.avatar}}" class="img-thumbnail" alt="user image" id="profilePic1">
        <img *ngIf="user.avatar == ''" src="{{photoBaseUrl}}/usergroup.png" class="img-thumbnail" alt="user image" id="profilePic2">
        <div class="overlay">
          <p class="addPicText" routerLink="/uploadProfilePic/{{user._id}}">
            <i class="far fa-user addPhIcon"></i>
            <br> 
            Update
          </p>
        </div>
      </div>

      <div class="col-sm-7">
        <div class="card-body py-0">
          <h5 class="card-title text-capitalize my-0 pt-1">{{user.name}}</h5>
          <p class="card-text text-muted p-0 m-0 font-sm">Email : {{user.email}}</p>
          <p class="card-text text-muted p-0 m-0 font-sm">Phone : {{user.phone}}</p>
          <p class="card-text text-muted p-0 m-0 text-capitalize font-sm">Active : {{user.active}}</p>         
        </div>
      </div>

      <div class="col-sm-3 pr-0 mr-0">
        <div class="w-75 mx-auto mt-2 text-uppercase">
          <p 
            routerLink="/editUser/{{user._id}}" 
            class="btn btn-outline-primary btn-block btnStyleSuccess font-xs m-0 p-1 mb-1">
            <i class="far fa-edit"></i> 
            Update
          </p>
          <p 
            (click)="openConfDialog(user._id)" 
            class="btn btn-outline-primary btn-block btnStyleDanger font-xs m-0 p-1">
            <i class="far fa-trash-alt"></i> 
            Delete
          </p>
        </div>        
      </div>
    </div>
  </div> 

在userlist.component.ts文件中，

ngOnInit() {
    this.getUsers();
    this.photoBaseUrl = '../../assets/images';    
  }

在后端我的图片上传控制器文件：

controller.storage = multer.diskStorage({
    destination: './angular-crud/src/assets/images',
    filename: function(req, file, cb){
      cb(null, file.fieldname + req.params.id + path.extname(file.originalname));
    }
  });

后端图片上传路径 //上传个人资料或头像路线

router.post('/uploadPic/:id', (req, res, next) => {
    controllers.upload(req, res, (err) => {
      if(err){
        res.json({
            success: false,
            msg: err
        });
        console.log(err);
      } else {
        if(req.file == undefined){
            res.json({
                success: false,
                msg: "Sorry! No File Selected."
            });
        }else{
          res.json({
            success: true,
            msg: "Great job! Image uploaded successfully."
          });
        }
      }
    });
  });

Answer 1

看起来你正在使用运行Webpack Dev Server的ng serve。构建应用程序并从虚拟目录提供它。它不提供实际的src/assets，因此如果您在运行时将文件复制到src，则在重建应用程序之前，它不会更新虚拟目录。

由于您需要上传功能，现在应该使用Express服务器实现服务静态文件：

const path = require('path');
app.use(express.static(path.join(
    __dirname, '..', 'path', 'to', 'client-app', 'dist'
)));

然后，运行ng build --dev --watch代替ng服务，以便在更改Angular代码时重建为dist。

修改 请注意，如果您关心保留这些文件，则不应将dist用于上传的文件。每次ng cli重建应用程序时，都会擦除dist。因此，请使用另一个上传目录，该目录位于ng cli创建的dist文件夹之外。你也可以通过另一个express.static电话告诉Express从那里提供文件。 Assets-directory只能用于属于您的app并随附的静态资产。