【问题标题】:file upload angular - spring boot - mysql文件上传角度 - spring boot - mysql
【发布时间】:2019-05-08 07:57:56
【问题描述】:

我有一个工作后的 api 将表单数据发送到后端并将其发布到数据库。 当我向表单添加输入文件类型并将其附加到数据表单时,出现错误。

我总是有这个错误:

“错误:“内部服务器错误”
消息:“无法识别的字段“文件”(类 org.sid.model.User),未标记为可忽略(6 个已知属性:“文件名”、“id”、“电子邮件”、“名称”、“密码”、“徽标"])↵ 在 [Source: (String)"{"name":"ss","email":"sss","password":"ssssssss","file":"C:\fakepath\ooredoo_758118.png "}"; line: 1, column: 58] (通过引用链: org.sid.model.User["file"])" 路径:“/用户” "

控制器

@CrossOrigin(origins = { "http://localhost:4200", "http://localhost:9000" }, maxAge = 36000)
/*@RequestMapping(value="/users" , method=RequestMethod.POST)*/
@RequestMapping(value="/users" , headers = ("content-type=multipart/*"), method = RequestMethod.POST,
consumes = MediaType.MULTIPART_FORM_DATA_VALUE ,
        produces = { "application/json" }
)
public User save(@RequestPart("file") MultipartFile f  ,
        @RequestPart ("user") String u) 
        throws JsonParseException, JsonMappingException, IOException{
    User user = new ObjectMapper().readValue(u, User.class) ;
    user.setLogo(f.getBytes());
    return userRepository.save(user);

    }

User.java

@Entity
public class User { 
@Id @GeneratedValue
private Long id ;
private String name ;
private String email ;
private String password ;
@Column(name="logo")
private byte[] logo;
@Column(name="file_name")
private String fileName ;

}

ma​​inApplication.java

@SpringBootApplication
public class MyChebbaApplication {
    public static void main(String[] args) {
        SpringApplication.run(MyChebbaApplication.class, args);
    }   
    @Bean
    public MultipartConfigElement multipartConfigElement() {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        factory.setMaxFileSize("10240KB");
        factory.setMaxRequestSize("10240KB");
        return factory.createMultipartConfig();
    }


}

客户端

component.html

 <div class="container" >
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="panel panel-default">
          <div class="panel-heading">Register</div>
          <div class="panel-body">
              <form class="form-horizontal" #form="ngForm" (ngSubmit)="onSubmit(form)">

                  <div class="form-group">
                      <label for="name" class="control-label col-md-4">Nom Complet</label>

                      <div class="col-md-6">
                        <input id="name" type="text" name="name" #userName="ngModel" ngModel class="form-control" required>
                      </div>
                    </div>

                    <div class="form-group">
                        <label for="email" class="control-label col-md-4">E-mail Address</label>

                        <div class="col-md-6">
                          <input id="email" type="email" name="email" #userEmail="ngModel" ngModel class="form-control" required>
                        </div>
                      </div>


                      <!-- <div class="form-group">
                          <label for="phone" class="control-label col-md-4">Phone number</label>

                          <div class="col-md-6">
                            <input id="phone" type="phone" name="phone" #phone="ngModel" ngModel class="form-control" >
                          </div>
                        </div> -->


                      <div class="form-group">
                          <label for="password" class="control-label col-md-4">Password</label>

                          <div class="col-md-6">
                            <input id="password" type="text" name="password" #password="ngModel" ngModel class="form-control" required>
                          </div>
                        </div>

                      <div class="form-group">
                          <label for="file" class="control-label col-md-4">File Upload</label>

                          <div class="col-md-6">
                            <input 
                             type="file" 
                            name="file"  
                            accept="image/*"
                            (change)="onFileSelected($event)" 
                            ngModel class="form-control" >
                          </div>
                        </div>              

                  <div class="form-group">
                          <div class="col-md-8 col-md-offset-4">
                            <button type="submit" class="btn btn-primary"
                              [disabled]="form.invalid">
                              Register
                            </button>
                          </div>
                        </div>



              </form>
          </div>
      </div>
    </div>
</div>
</div>

component.ts

    selectedFile: File = null ;


  constructor(private userService: UserService) { }

  ngOnInit() {
  }

onFileSelected(event) {
  console.log(event) ;
this.selectedFile = event.target.files[0] ;
}


  onSubmit(form: any) {
    let fd = new FormData() ;
    const user = form.value ;
    fd.append('user' , JSON.stringify(user)) ;
    fd.append('file' , this.selectedFile ) ;
    console.log(fd) ;
    this.userService.register(fd  )
      .then((resp) => {
        this.userService.logUserIn(resp) ;
      }) ;
  }

user.service.ts

   register(fd: FormData ): Promise<UserData> {
    return this.http.post(`${CONFIG.API_URL}/users`, fd)
                    .toPromise()
                    .then((response) => {
                        let token = response.json().token ;
                            let user = response.json() ;

                            let userData = new UserData(token, user) ;
                            this.router.navigate(['/users']);
                            return userData ;
                    });

}

【问题讨论】:

    标签: mysql angular spring-boot


    【解决方案1】:

    这意味着您的 JSON 字符串 u 不包含“文件”字段。为了忽略缺失的字段,请使用:

    ObjectMapper mapper = new ObjectMapper()
                          .configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false) 
    
    mapper.readValue(u, User.class);
    

    ...

    祝你好运。

    【讨论】:

    • 我这样做并给我这个错误:“com.mysql.jdbc.MysqlDataTruncation:数据截断:第 1 行的列 'logo' 的数据太长”
    【解决方案2】:

    这意味着 User 没有属性 file

    要解决这个问题,只需在 application.properties 中禁用该配置即可。

    pring.jackson.deserialization.fail-on-unknown-properties=true
    

    【讨论】:

    • 我添加了它,但仍然出现同样的错误。无法识别的字段文​​件
    猜你喜欢
    • 2021-10-20
    • 2017-12-30
    • 2018-06-04
    • 2018-04-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多