js前端fetch（）发布到Rails后端文件路径到文件错误

Question

我正在向rails端点发出javascript fetch（）发布请求。我正在使用Active Storage从本地计算机保存图片。浏览器不允许完整的文件路径通过。在带有erb的rails前端中，我可以使用图片并在rails视图中查看它。转到JavaScript前端并将其发布到Rails API并非易事。我知道调试器和binding.pry代码中发生了什么。在js端，文件路径被伪路径所混淆。因此，当我触碰后端时，我完全可以理解。我正在使用主动存储gem，在我的模型中，我有一个has_one_attached：file

FrontEnd

index.html <input type="file" id="myfile" name="myfile">

     //this will hit the endpoint
        fetch(BASE_URL + "/" + "pokemons/test", {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },

            body: JSON.stringify(obj)
        }).then( response => response.json()
    ) 

后端

#=>model.rb 
class Pokemon < ApplicationRecord 
  has_one_attached :file 
#=> backend rails terminal in pry 

    {"nickname"=>"first_try", "species"=>"fictional", "trainer_id"=>1, "file"=>"C:\\fakepath\\WIN_20200205_00_06_57_Pro.jpg", "controller"=>"pokemons", "action"=>"test", "pokemon"=>{"species"=>"fictional", "nickname"=>"first_try", "trainer_id"=>1}} 

terminal_errors: 

ActiveSupport::MessageVerifier::InvalidSignature (ActiveSupport::MessageVerifier::InvalidSignature):

`

Answer 1

这是我的问题的一半答案。它以html和浏览器尝试在我的计算机中屏蔽我的文件开始，并以正确的html输入形式接收和上传文件结束。 proper form

现在，为此目的而更新了我的html表单，即使对Rails端点采取了适当的措施，我也可以将图像文件保存到Active Storage中

这是我的html

  <div>
    <label for="file">Choose a file</label>
    <input type="file" id="file" name="file"> 
    <input type="text" id="nickname" name="nickname"> 
    <input type="text" id="species" name="species"> 
    <input type="number" id="trainer_id" name="trainer_id">
  </div>
  <div>
    <button id="test">Send the file</button>
  </div>
</form>``` 

Now that my html is handling the posting action to my rails API I just need a way to open the file and view it.