我在服务器上发送图像时遇到问题。 我使用Spring Boot和Angular。 这是我在Spring Boot中的控制器:
@RestController
@RequestMapping("api/cateogry/dar")
public class CategoryController {
private static final Logger logger = LoggerFactory.getLogger(CategoryController.class);
@Autowired
private CategoryRepository categoryRepository;
@Autowired
private FileStorageService fileStorageService;
@PostMapping
@ResponseStatus(HttpStatus.OK)
public void create(@RequestBody CategoryModel bike, @RequestParam("file") MultipartFile file) {
String fileName = fileStorageService.storeFile(file);
bike.setImagePath(fileName);
categoryRepository.save(bike);
}
}
这是我的application.property
:
spring.jpa.database-platform=org.hibernate.dialect.SQLiteDialect
spring.jpa.hibernate.ddl-auto=none
spring.jpa.show-sql=true
spring.datasource.url=jdbc:sqlite:darDB.db
spring.datasource.username=
spring.datasource.password=
spring.datasource.driver-class-name=org.sqlite.JDBC
## MULTIPART (MultipartProperties)
# Enable multipart uploads
spring.servlet.multipart.enabled=true
# Threshold after which files are written to disk.
spring.servlet.multipart.file-size-threshold=2KB
# Max file size.
spring.servlet.multipart.max-file-size=200MB
# Max Request Size
spring.servlet.multipart.max-request-size=215MB
## File Storage Properties
file.upload-dir=./uploads
当我从邮递员发送数据时,仅此消息没有错误:
{
"timestamp": "2019-02-13T14:56:31.320+0000",
"status": 404,
"error": "Not Found",
"message": "No message available",
"path": "/uploadFile"
}
但是当我从Angular发送数据时,出现此错误:
org.springframework.web.multipart.MultipartException: Current request is not a multipart request
我不知道前端或后端存在问题。 这是我的HTLM代码:
<input
type="file" (change)="onFileChanged($event)"
#fileInput>
<button (click)="fileInput.click()">Select File</button>
<button (click)="onUpload()">Upload!</button>
这是我在组件中的代码:
export class AppComponent implements OnInit {
category: CategoryModel[];
selectedFile: File = null;
constructor(private data: DataServiceService, private http: HttpClient) { }
ngOnInit() {
this.data.getCategory().subscribe(data => {
this.category = data;
console.log(data)
})
}
onFileChanged(event) {
this.selectedFile = <File>event.target.files[0];
console.log(this.selectedFile);
}
onUpload() {
// this.http is the injected HttpClient
const data = new CategoryModel("s", "s", "s", 1);
const uploadData = new FormData();
uploadData.append('myFile', this.selectedFile, this.selectedFile.name);
this.data.storeProduct(data, uploadData).subscribe(m => {
console.log(m)
})
}
}
这是我的服务
const HttpUploadOptions = {
headers: new HttpHeaders({ "Accept": "application/json" })
}
@Injectable({
providedIn: 'root'
})
export class DataServiceService {
constructor(private http: HttpClient) { }
private cateogryUrl = 'api/cateogry/dar'; // URL to web api
/** GET Category from the server */
getCategory(): Observable<CategoryModel[]> {
return this.http.get<CategoryModel[]>(this.cateogryUrl).pipe(
catchError(this.handleError('getProduct', []))
)
}
/** POST Product on server */
storeProduct(category: CategoryModel, fd: FormData): Observable<any> {
return this.http.post(this.cateogryUrl, { category, fd },HttpUploadOptions).pipe(
catchError(this.handleError<CategoryModel>('addHero'))
)
}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
}