javascript - 文件上传 Angular 2+ 后获取错误 404

Question

我正在使用 multer 制作上传文件系统，一切正常，文件上传到正确的文件夹，即 src/assets/img/profile，但是当我上传文件并刷新页面时，图像不显示，我收到 404 错误，除非我运行 ng serve ，否则在浏览器控制台中找不到文件。我究竟做错了什么 ？

后端

function makeid() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './client/src/assets/img/profile');
  },
  filename: function (req, file, cb) {
    User.findOne({_id:req.decoded.userId},(err,user)=>{
        if(err){
            res.json({success:false,message:err});
        }
        else{
            if(!user){
                res.json({success:false,message:"User not found"});
            }
            else{
                cb(null, "profile" + user.username +makeid());
            }
        }

    });

  }
});
router.post('/edit-photo', upload,function (req,res){
        console.log(req.file);
      if (!req.file) {
        res.json({success:false,message:"No file was provided"});
      }
      else{
        User.findOne({_id:req.decoded.userId},(err,user)=>{
            if(err){
                res.json({success:false,message:'Something went wrong: '+err});
            }
            else{
                if (!user) {
                    res.json({success:false,message:'User not found'});
                }
                else{

                    user.img=req.file.filename;
                    user.save({ validateBeforeSave: false },(err)=>{
                        if(err){
                            res.json({success:false,message:'Something went wrong: '+err});
                        }
                        else{
                            res.json({success:true,file:req.file});
                        }
                    });
                }
            }
        });
      }
    });

对于前端，我发送一个 XMLHttpRequest 授权服务.ts

makeFileRequest(url: string,params: string[],files: File[]): Observable<any>{
    return Observable.create(observer => {
      let formData: FormData = new FormData();
      let xhr: XMLHttpRequest = new XMLHttpRequest();

      for(let i =0; i<files.length;i++){
        formData.append('file',files[i],files[i].name);
      }

      xhr.onreadystatechange = ()=>{
        if(xhr.readyState === 4){
          if(xhr.status===200){
            observer.next(JSON.parse(xhr.response));
            observer.complete();
          }
          else{
            observer.error(xhr.response);
          }
        }
      };

      xhr.upload.onprogress = (event)=>{
        this.progress = Math.round(event.loaded / event.total *100);

        this.progressObserver.next(this.progress);
      }
      xhr.open('POST',url,true);
      xhr.setRequestHeader('authorization',this.authToken);
      xhr.send(formData);
    });
  }

编辑配置文件.component.ts

upload(){
    this.authService.makeFileRequest('http://localhost:8080/authentication/edit-photo',[],this.filestoUpload).subscribe((data)=>{
      this.profilePic=data;
      window.location.reload();
    });
  }

  onFileChange(fileInput: any){
    this.filestoUpload=fileInput.srcElement.files;
  }

编辑配置文件.component.html

    <img  class="img-thumbnail img-responsive" [src]="profilePic" width="300px" height="300px">
  <label class="btn btn-default" for="file">Edit Photo</label>
  <input style="display: none;" id="file" type="file" name="file" (change)="onFileChange($event)">
<button (click)="upload()" class="btn btn-primary">Send</button>

Answer 1

<img class="img-thumbnail img-responsive" (src)="profilePic" width="300px" height="300px">

应该是

<img class="img-thumbnail img-responsive" [src]="profilePic" width="300px" height="300px">

[] 而不是 ()

如果你设置profilePic

this.profilePic = this.profilePic + Date.now();

然后浏览器应该重新加载图像。 确保仅在上传图片完成后更新profilePic。