0

错误图片

我用cropperjs和uppy在rails中实现神社gem，

我参考了神社图像裁剪的用法和示例代码

然后我实现了代码，貌似代码是正确的，

但是我遇到了一些错误Module not found: Error: Can't resolve 'cropbox' 2 and above errors,

我搜索了类似的问题并尝试了一些解决方案，但我仍然无法使用神殿宝石，

你愿意帮助我吗？

应用程序.js：

//= require popper
//= require bootstrap-sprockets
//= require_tree .

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")


function fileUpload(fileInput) {
 var formGroup = fileInput.parentNode
 var hiddenInput = document.querySelector('.upload-data')
 var imagePreview = document.querySelector('.image-preview img')

formGroup.removeChild(fileInput)

 var uppy = Uppy.Core({
    autoProceed: true,
    restrictions: {
     allowedFileTypes: fileInput.accept.split(','),
    }
   })
  .use(Uppy.FileInput, {
    target: formGroup,
    locale: { strings: { chooseFiles: 'Choose file' } },
   })
  .use(Uppy.Informer, {
    target: formGroup,
   })
  .use(Uppy.ProgressBar, {
    target: imagePreview.parentNode,
  })
  .use(Uppy.ThumbnailGenerator, {
    thumbnailWidth: 600,
  })
  .use(Uppy.XHRUpload, {
    endpoint: '/upload',
  })

uppy.on('upload-success', function (file, response) {
  imagePreview.src = response.uploadURL

  var uploadedFileData = JSON.stringify(response.body['data'])

  hiddenInput.value = uploadedFileData

  var copper = new Cropper(imagePreview, {
    aspectRatio: 1,
    viewMode: 1,
    guides: false,
    autoCropArea: 1.0,
    background: false,
    crop: function (event) {
    data = JSON.parse(hiddenInput.value)
    data['metadata']['crop'] = event.detail
    hiddenInput.value = JSON.stringify(data)
     }
    })
  })
}

 document.querySelectorAll('input[type="file"]').forEach(function (fileInput) {
  fileUpload(fileInput)
})

作物箱.js：

import 'cropperjs/dist/cropper.css';

import Cropper from 'cropperjs'

function cropbox(image, url, { onCrop }) {
 image.src = url

   new Cropper(image, {
    aspectRatio: 1,
    viewMode: 1,
    guides: false,
    autoCropArea: 1.0,
    background: false,
    zoomable: false,
    crop: event => onCrop(event.detail)
  })
}

export default cropbox

文件上传.js：

import cropbox from 'cropbox'

  uppy.on('upload-success', (file, response) => {
   // retrieve uploaded file data
    const uploadedFileData = response.body['data']

    // set hidden field value to the uploaded file data so that it's submitted
    // with the form as the attachment
    hiddenInput.value = JSON.stringify(uploadedFileData)

    cropbox(imagePreview, response.uploadURL, {
      onCrop(detail) {
        let fileData = JSON.parse(hiddenInput.value)
        fileData['metadata']['crop'] = detail
        hiddenInput.value = JSON.stringify(fileData)
      }
    })
  })

form.html.erb：

<%= form_with model: @blog_form , url: user_blogs_path ,local: true do |f| %>

 <div class="field">
  <%  f.label :title %>
  <%= f.text_field :title %>
 </div>

<div class="field">
<%  f.label :content %>
<%= f.text_area :content %>
</div>

<div class="field ">
<%  f.label :user_id %>
<%= f.hidden_field :user_id, value: current_user.id %>
</div>

<div class ="field form-group">
<%= f.fields_for  :photos, Photo.new do |photos_fileds|  %>

<%= photos_fileds.label :image , class: "form-control" %>
<%= photos_fileds.hidden_field :image,  class: "upload-data", value: 
photos_fileds.object.cached_image_data %>
<%= photos_fileds.file_field  :image , class: "form-control  ", id: "select-files"%><br/>
<div class="image-preview">
<img id="image" src="<%= photos_fileds.object.image_url(:medium) %>" height="300" class="rounded"  >
</div>

<% end %>

</div>



  <%= f.submit "create", class: "btn btn-primary" %>
 <% end %>

应用程序.html.erb：

  <!DOCTYPE html>
 <html>
   <head>
    <title>Prottype2</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_pack_tag 'application' %>
   <%= javascript_pack_tag 'cropbox' %>
   <%= javascript_pack_tag 'fileUpload'%>

   <script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>

   <link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" rel="stylesheet" 
 />

  </head>

  <body>


   <p class="notice"><%= notice %></p>
   <p class="alert"><%= alert %></p>

   <%= yield %>


  </body>
</html>

我移动了代码位置

应用程序.html.erb：

<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"> 
</script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"> 
</script>

<link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" 
rel="stylesheet" />
<link 
href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" 
rel="stylesheet" />

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 
 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 
'reload' %>
<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'app' %>
<%= javascript_pack_tag 'cropbox' %>
<%= javascript_pack_tag 'fileUpload'%>

而且我将文件输入 application.js 移动到 app.js

4

1 回答 1

0

我解决了这个错误，我参考了 Rails 中的 Shrine 示例 我只是忘记了 fileUpload.js 中的代码细节

于 2020-05-30T14:02:20.953 回答