我無法使用Java Spring Boot和Angular 7在遠程服務器（Apache2）上上傳文件。它在localhost上運行良好

Question

我無法在遠程服務器（apache2）上傳文件（圖像）。 我使用java spring boot for back和Angular 7 for front）。 在localhost：4200它運作良好。 在我從chrome瀏覽器控制台獲得的遠程服務器上：

POST http://www.xxx.tech:8081/images/upload 400

錯誤：“{”timestamp“：”2019-05-10T09：39：38.162 + 0000“，”status“：400，”錯誤“：”錯誤請求“，”消息“：”找不到文件“，”路徑“ ： “/圖片/上傳”}”
headers：HttpHeaders {normalizedNames：Map（0），lazyUpdate：null，lazyInit：ƒ}
消息：“ http：//www.xxx.tech:8081/images/upload：400 OK的Http失敗響應”
名稱：“HttpErrorResponse”
好的：假的
狀態：400
statusText：“確定”
網址：“ http://www.xxx.tech:8081/images/upload ”

目錄文件夾已存在於VPS服務器上。 如何使它工作？ 在我的controller.java中，我試圖替換

File tmp = new File("../front/assets/img/").getCanonicalFile();

同

File tmp = new File("./front/assets/img/").getCanonicalFile();

與

File tmp = new File("/home/alexandra/www/front/assets/img/").getCanonicalFile();

但它仍然顯示相同的錯誤消息

JAVA：ImageController.java

@PostMapping(value="images/upload")
    public String uploadImage( @RequestParam("file") MultipartFile transferedFile) throws Exception{
        try {
            //FOR LOCALHOST (works)
            //File tmp = new File("../FRONT- 
            //Alexandra/src/assets/img/").getCanonicalFile();

            //FOR REMOTE SERVER (don't work)
            File tmp = new File("../front/assets/img/").getCanonicalFile();

            String destination = tmp.getPath() + "/" + transferedFile.getOriginalFilename();

            File data = new File(destination);
            transferedFile.transferTo(data);
            Image image = new Image(transferedFile.getOriginalFilename(), destination);
            imageRepository.save(image);
            return destination;

            }catch( Exception param_exception) { 
                throw new ResponseStatusException(
                    HttpStatus.BAD_REQUEST,
                    "No file found");
            }
    }

Angular：mycomponent.component.ts

public apiUrl: string = environment.ApiUrl;
...

public uploadImaeg(): void {

      this.imgesUploaded.map(image => {

         if (image != null && image != undefined) {
            this.imagesService.addImage(image).subscribe();
         }  
      })     
   }

images.service.ts

public addImage(param_file: File): Observable<Object> {
        const headers: HttpHeaders = new HttpHeaders();
        const data: FormData = new FormData();

        data.append("file", param_file, param_file.name);
        headers.append("Content-Type", "multipart/form-data");
        const Obs: Observable<boolean> = this.serviceHttp.post(
            this.apiUrl + "images/upload", data, { headers: headers}
        ).pipe(
            map(
                (param_response: boolean) => {
                    return param_response;
                }
            )
        );
        return Obs;
    }

environment.prod.ts

export const environment = {
  production: true, 
  ApiUrl: 'http://'+document.location.hostname +':8081/'
};

Answer 1

我沒有看到你實際上創建了一個存儲目錄。 您可能希望添加顯式目錄創建，因為您的bean初始化方法類似於：

private final Path rootLocation = Paths.get("upload");
@PostConstruct
public void init() {
  try {
    Files.createDirectories(rootLocation);
  }
  catch (IOException e) {
     throw new StorageException("Could not initialize storage", e);
  }

}

Answer 2

@AlexGera你讓我明白了問題所在：

我嘗試了這樣的代碼：

private final Path rootLocation = Paths.get("images/upload");
    @PostConstruct
    public void init() {
      try {
        Files.createDirectories(rootLocation);
      }
      catch (IOException e) {
         throw new RuntimeException("Could not initialize storage", e);
      }
    }

    @PostMapping(value="images/upload")
    public String uploadImage( @RequestParam("file") MultipartFile transferedFile) throws Exception{
        try {

            File tmp = new File("/home/alexandra/www/front/assets/img/").getCanonicalFile();

            String destination = tmp.getPath() + "/" + transferedFile.getOriginalFilename();

            File data = new File(destination);
            transferedFile.transferTo(data);
            Image image = new Image(transferedFile.getOriginalFilename(), destination);
            imageRepository.save(image);
            return destination;

            }catch( Exception param_exception) { 
                throw new ResponseStatusException(
                    HttpStatus.BAD_REQUEST,
                    "No file found");
            }
    }

它沒有解決問題，但它在后備文件夾中創建了一個文件夾：image / upload。 並且，此文件夾的權限不是root root，就像它位於filezilla服務器目錄中的所有文件夾中一樣。 這是亞歷山德拉亞歷山德拉

所以，我更改了文件夾資產和文件夾img的權限（也許只有img，最后一個文件夾，應該可以工作，我不知道），因為我的路徑是

/home/alexandra/www/front/assets/img/

我這樣做了：

cd /home/alexandra/www/front
sudo chown alexandra:alexandra assets
cd assets
sudo chown alexandra:alexandra img
sudo service myserver stop
sudo service myserver start
sudo systemctl restart apache2

它奏效了