Vue Js и Rails: загрузка изображения - PullRequest
Новая
       159

Vue Js и Rails: загрузка изображения

0 голосов
/ 19 июня 2020

Я пытаюсь загрузить изображение в свой API-интерфейс rails, используя активное хранилище gem, и отправляю его как FormData через мое Vue приложение. Однако он дает ошибку param is missing or the value is empty, даже если все параметры отправляются.

Vue Js (Компонент) 

async onSubmit(e){
          const formData = await new FormData()
          formData.append('name', this.name)
          formData.append('description', this.description)
          formData.append('country_id', this.country[0].id)
          formData.append('image', this.selectedFile)
          this.addDish(formData);
      }

Vuex 

async addDish({ commit }, formData){
        const response = await axios.post(URL,formData);
        commit('newDish', response.data);
    },

Модель Rails 

class Dish < ApplicationRecord
  has_one_attached :image
end

Контроллер Rails 

def create
dish = Dish.new(dish_params)
if dish.save
 render json: dish, status: :created
else
 render json: dish.errors, status: :unprocessable_entity
end
end 

private
def dish_params
  params.require(:dish).permit(:name, :description, :country_id, :image)
end

Ошибка API 

 Parameters: {"name"=>"teste", "description"=>"teste", "country_id"=>"1", 
"image"=>#<ActionDispatch::Http::UploadedFile:0x00005584f2f458e0 
@tempfile=#<Tempfile:/tmp/RackMultipart20200619-4-o32kdp.png>, @original_filename="0.png",
 @content_type="image/png", 
@headers="Content-Disposition: form-data; name=\"image\"; filename=\"0.png\"\r\nContent-Type: image/png\r\n">}
2020-06-19T06:20:28.183600+00:00 app[web.1]: I, [2020-06-19T06:20:28.183538 #4]  INFO -- : [c510b9d0-df62-4479-a4ef-1b898d113fcc] 
Completed 400 Bad Request in 1ms (ActiveRecord: 0.0ms | Allocations: 163)
2020-06-19T06:20:28.184035+00:00 app[web.1]: F, [2020-06-19T06:20:28.183978 #4] FATAL -- : [c510b9d0-df62-4479-a4ef-1b898d113fcc]
2020-06-19T06:20:28.184048+00:00 app[web.1]: [c510b9d0-df62-4479-a4ef-1b898d113fcc] 
ActionController::ParameterMissing (param is missing or the value is empty: dish):

1 Ответ

0 голосов
/ 19 июня 2020

ошибка возникает из-за того, что вам требуется ключ :dish в запросе, но вы его не отправляете. давайте посмотрим

в вашем контроллере rails, у вас есть следующее before_action

def dish_params
  params.require(:dish).permit(:name, :description, :country_id, :image)
end

здесь вы говорите, что запрос должен иметь ключ с именем di sh, и этот ключ должен быть символом с именем ключа, описанием, contryID и изображением. поэтому запрос должен быть структурирован таким образом 

requestobject
   dish
       name
       description
       image
       contryID

Но в вашем интерфейсе вы не указываете имя ключа dish в своем запросе, а скорее вы распространяете содержимое своей формы на запрос, поэтому ваш запрос будет таким: 

requestobject
   name
   description
   image
   contryID

, как вы видите, все значения присутствуют, но из-за того, что before_action хочет, чтобы они находились внутри объекта с именем dish, поэтому вы получите сообщение об ошибке 

ActionController::ParameterMissing (param is missing or the value is empty: dish):

, как говорится в сообщении об ошибке, ключ di sh не определен в запросе.

Решение в том, что когда вы отправляете свой запрос, кроме распространения данные формы внутри запроса, распределите их внутри имени ключа dish следующим образом: 

async addDish({ commit }, formData){
        const request = {
             dish: formData
         };

        const response = await axios.post(URL, request);
        commit('newDish', response.data);
    },

теперь, как вы видите, у объекта запроса есть ключ с именем dish, теперь ваш контроллер будет удовлетворен, так как договор теперь выполнен

...