Question

我正在尝试使用带有导轨后端的角4前端的应用程序。我目前正在尝试弄清楚如何使用carrierwave将图像上传到我的rails后端服务器。我很困难，关于如何使用rails和carrierwave实现Angular 4的信息非常少。我无法弄清楚如何将图像上传到rails服务器，当我检查rails控制台时，我收到以下消息。据我所知，由于某种原因没有发布任何内容，我不知道为什么会这样。如果有人知道更多关于角度和轨道的信息可能会有所帮助。

我尝试上传图片时

rails console消息：

Processing by ImagesController#create as HTML
Parameters: {"images"=>{}}
Completed 400 Bad Request in 1ms (ActiveRecord: 6.0ms)

HTML

<input type="file" #selectFile id="selectFile" name="selectFile" class="btn btn-success">
<input type="button" class="btn btn-primary" (click)="uploadImage()" value="Upload Image">

上载image.component.ts

export class UploadImageComponent{

    @ViewChild('selectFile') selectFile;
    constructor(private uploadService: UploadService) {}

    uploadImage(){
        let files = this.selectFile.nativeElement.files[0];
        this.uploadService.uploadImage(files).subscribe(data => {return true},
        error => {
                console.log("error uploading image");
                return Observable.throw(error);
        })
}

上载service.ts

@Injectable()
export class StallionService {
    headers: Headers;
    options: RequestOptions;

    private imagesUrl = 'http://localhost:3000/images';

    constructor(private http: Http) {
        this.headers = new Headers({'Content-Type':'application/json'});
        this.options = new RequestOptions({headers: this.headers});
    }

    uploadImage(image: File){
        console.log(image);
        const formData = new FormData();
        formData.append("img", image);
        console.log(formData);
        return this.http.post(this.imagesUrl, formData,
            this.options).map((res: Response) => res.json());
    }
}

Answer 1

我无法在代码中看到任何错误，我对您的rails控制台中没有显示任何参数感到有点惊讶。

但我可以告诉你我是怎么做的。

一个简单的解决方案（在Angular 2中）：

按照你设置的方式，我发现使用Carrierwave和Angular保存像这样的图像非常复杂。

更简单的解决方案是使用Base64和gem Carrierwave Base64以及Angulars FormGroup和FormController。

然后，您可以在更改时使用FileReader将文件输入设置为值：

<!-- part of a FormGroup called imageForm -->
<input formControlName="file" (change)="setImageFile($event)" type="file" id="selectFile" name="selectFile" class="btn btn-success">

然后在你的组件中：

setImageFile(event) {
  this.image_file = event.target.files[0];
  if(this.image_file) {
    const file_reader = new FileReader();
    file_reader.readAsDataURL(this.image_file);
    file_reader.onload = (e: any) => {
      this.imageForm.get('file').setValue(file_reader.result);
    }
  }
}

然后，在您的上传中，您可以在帖子请求中发送imageForm.value。

使用base64 gem，您必须更改一行（在GitHub页面上阅读），否则事情将像以前一样工作，您现在可以将图像保存到AWS等。

我希望你明白这一点 - 它对我有用！ :)

使用Angular 4和carrierwave

1 个答案:

一个简单的解决方案（在Angular 2中）：