отправка изображения из моего собственного приложения в свой API-интерфейс laravel с помощью axios - PullRequest
Новая
       5

отправка изображения из моего собственного приложения в свой API-интерфейс laravel с помощью axios

0 голосов
/ 24 июня 2018

Я хочу отправить изображение из моего собственного собственного приложения в бэкэнд моего laravel, для этого я извлекаю URI изображения и отправляю объект изображения, используя axios с другими строковыми данными, но запрос на публикацию не выполняется.зная, что когда я отправляю запрос на публикацию без изображения, все работает нормально.

РЕДАКТИРОВАТЬ: Я прокомментировал весь код в операторе if моей функции laravel и изменил его на простойвлияние на мою переменную $ picture: $ picture = "picture", но продукт не добавлен!это означает, что запрос даже не отправляется из моего приложения реакции, когда я предоставляю изображение.

моя собственная функция реагирования: 

    const config = { headers: { "Content-Type": "multipart/form-data" } };
    // appending some string data ...
    data.append("position", JSON.stringify(position));
    // checking if the user took a picture ..
    if (this.state.uri !== null) {
      let filename = this.state.uri.split("/").pop();
      data.append("picture", {
        uri: this.state.uri,
        name: filename,
        type: "image"
      });
    } else {
      data.append("picture", null);
    }
    // sending the request with axios to my backend ..
    const response = axios.post("product/create", data, config);

моя функция laravel: 

   $user_id = $this->retrieveIdByToken($request->token);
    $picture = null;
    if ($request->hasFile("picture")){
        $picture = $request->file("picture")->getFilename() . "_" . $user_id . "." . $request->file("picture")->extension();
        Storage::putFileAs(
            '/public/products/pictures/', $request->file('picture'),$picture
        );
    }
    $product = Product::create([
        'user_id' => $user_id,
        'price' => $request->price,
        'position' => json_decode(json_encode($request->position)),
        'category_id' => $request->category_id,
        'name' => $request->name,
        'description' => $request->description,
        'caracteristics' => json_decode(json_encode($request->caracteristics)),
        'image' => $picture
        ]);

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Использовать библиотеку RNFetchBlob.

Как это работает,

Используйте Image Picker и сохраните изображение в состоянии, а затем используйте этот код 10.0.3.2 для genymotion, замените его, если используете реальное устройство 

 RNFetchBlob.fetch('POST', 'http://10.0.3.2:8000/api/uploadImage', {
    Authorization : "Bearer access-token",
    otherHeader : "foo",
    'Content-Type' : 'multipart/form-data',
    'Accept':'application/json',
  }, [
     { name : 'image1', filename : 'avatar.png', data: this.state.image1},
    ]).then((response) => response.json())
  .then((responseJson) => {

    alert(JSON.stringify(responseJson));

  }).catch((err) => {
    alert(err)
  })

В Ларавеле, ВАШ API, 

Route::post('upload','ReactController@save');

ВАШ КОНТРОЛЛЕР 

public function save(Request $req){
$destinationPath = public_path('/upload');
            $image1=$request->file('image1');
            $_image1 = rand().'.'.$image1->getClientOriginalExtension();
            $image1->move($destinationPath, $_image1);

$info = new Upload;
$info->image = $_image1;
$info->save();

return json_encode("Successfully Saved");
}
0 голосов
/ 24 июня 2018

Я нашел решение, во-первых, мне не нужно указывать axios конфигурацию, а во-вторых, наиболее типом будет image / jpeg

...