ReferenceError uppy 未定义答案

【问题标题】：ReferenceError uppy is not definedReferenceError uppy 未定义
【发布时间】：2020-09-13 09:46:59
【问题描述】：

Error image

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

我指的是Usage of shrine Image Cropping和Example code

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

但我遇到了一些错误Module not found: Error: Can't resolve 'cropbox' 2 及以上错误，

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

你愿意帮助我吗？

application.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)
})

cropbox.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 %>

application.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>

我移动了代码位置

application.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

【问题讨论】：

可能是因为应用js在uppy之前加载的。以及cropbox 在cropper.js 之前加载。将您的 cdn 脚本移到 javascipt_pack_tags 上方，看看是否可以解决问题。此外，我绝不建议在您的应用程序 js 文件中包含 fileUpload()。把它移到别处，因为我觉得缺少 jquery 可能会影响我上面的建议
感谢engineersmnky，我移动了这些文件还是出现错误，你的意思是我缺少jquery？我已经实现了 jquery

标签： javascript ruby-on-rails cropperjs shrine uppy

【解决方案1】：

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

【讨论】：