Question

我是角色新手，我正在创建个人资料页面。当我尝试上传个人资料图片时，我收到错误POST http://localhost:3000/api/v1/users/avatar/jja 500（内部服务器错误）。当我在网络选项卡中查看错误时，它显示{“错误”：“找不到文件”}。

以下是我的代码

profile.ts

public onFormSubmit({ value, valid }: { value: any, valid: boolean }) {
    let profile = JSON.parse(localStorage.getItem("profile"));
    this.accountDetails = profile.user;
    this.user = value;
    this.api.post("/users/avatar/" + this.accountDetails.username, value, true)
      .subscribe((response) => {
        this.api.get("/users/" + this.accountDetails.username, true)
          .subscribe((response) => {
            profile.user = response.data
            console.log(this.accountDetails.username)
            localStorage.setItem("profile", JSON.stringify(profile))

            this.accountDetails = profile.user;
            this.user = this.accountDetails;
            console.log("2", this.user)
            location.href = "/profile"
          }, (err) => {
            alert("Update failed " + err);
          })
      }, (err) => {
        alert("Update failed " + err);
      })
  }

profile.html

<div class="col-md-3">
                    <form novalidate (ngSubmit)="onFormSubmit(imageUpload)" #imageUpload="ngForm">
                      <div class="profile-pic" style="background-image: url('http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png')"
                      >
                      {{accountDetails.avatarUrl}}
                      </div>
                    <input type="file"
                        placholder="Change Image"
                          name="avatarUrl"
                          [(ngModel)] = "user.avatarUrl" 
                          #avatarUrl = "ngModel">
                          <p  class="form-submit ">
                              <input  type="submit" value="Update" class="button color small submit">
                            </p>

                    </form>
                  </div>

Answer 1

You cannot simply upload the file like this using angular models.

You have to use either formdata or  convert the file to base64 then upload the profilepic.

Here is how you can convert file to base64

readFileData(file:File):void{
        var _this=this;

        if (file) {
let fileModel:FileModel=new FileModel();
          fileModel.fileType = file.type;        
          fileModel.fileName = file.name;
          fileModel.fileExtension = '';

          if(file.name.lastIndexOf(".") >= 0){
            fileModel.fileExtension = file.name.substr(file.name.lastIndexOf(".")+1);
          }
          fileModel.fileSize = file.size;

          var reader = new FileReader();
          reader.readAsBinaryString(file);

          reader.onload=function(e){
            _this._handleReaderLoaded(fileModel,e);
          }
}
_handleReaderLoaded(fileModel:FileModel,readerEvt):void {
        let binaryString = readerEvt.target.result;
        fileModel.base64String=btoa(binaryString);
      }

on backend convert again from base64 to file.

无法上传角色2中的个人资料图片上传

1 个答案: