ReactJS Uppy - 状态更改后在 uppy 仪表板中显示图像 |如何在 uppy.io 库中预填充/预加载图像答案

【问题标题】：ReactJS Uppy - Show images in uppy dashboard after state changes | How prefill/preload images in uppy.io libraryReactJS Uppy - 状态更改后在 uppy 仪表板中显示图像 |如何在 uppy.io 库中预填充/预加载图像
【发布时间】：2021-11-06 03:14:12
【问题描述】：

我正在使用 Uppy Dashboard，每当状态更改时，uppy 都会重置其状态，并且不会显示上传的图像。如何在我的 uppy 中添加/显示图像？如何在 uppy.io 库中预填充/预加载图像？

任何帮助将不胜感激。谢谢以下是我的代码：

    const equipment_uppy = new Uppy({
      id: 'equipment_uppy',
      restrictions: { allowedFileTypes: ['image/*', 'video/*'] },
      autoProceed: false
    })
   
    equipment_uppy.on('file-added', (file) => {
      equipment_uppy.setFileMeta(file.id, {
        type: file.source,
        avintakeid : data.id
      })
    })
   
    equipment_uppy.use(XHRUpload, {
    endpoint: `${process.env.REACT_APP_SITE_URL}/api/auth/uploadavintakeimages`,
    formData: true,
    fieldName: 'files[]',
    headers: {
     Authorization: `Bearer ${localStorage.getItem('accessToken')}`
    }})
    
     
    equipment_uppy.use(Webcam)

<Dashboard   
uppy={equipment_uppy}  
id='equipment_location_image'
width='100%'
height='300px'
plugins={['Webcam']}
/>

【问题讨论】：

标签： javascript reactjs file-upload uppy

【解决方案1】：

确保您拥有最新版本的 Uppy 核心和 Uppy react NPM https://www.npmjs.com/package/uppy。之后请以这种方式初始化

import Uppy from '@uppy/core'
import XHRUpload from '@uppy/xhr-upload'
import Webcam from '@uppy/webcam'  
import { DragDrop, Dashboard, useUppy } from '@uppy/react' 

    const equipment_uppy = useUppy(() => {
        return new Uppy({
        id: 'equipment_uppy',
        restrictions: { allowedFileTypes: ['image/*', 'video/*'] }, 
        autoProceed: false
        }) 
        .use(XHRUpload, { 
        endpoint: `${process.env.REACT_APP_SITE_URL}/api/auth/uploadapi`, 
        formData: true,
        fieldName: 'files[]', 
        headers: {
         Authorization: `Bearer ${localStorage.getItem('accessToken')}`
        }})  
  })
  
  equipment_uppy.on('file-added', (file) => {  
      equipment_uppy.setFileMeta(file.id, {
        type: file.source,
        avintakeid : data.id
      })  
  })  
  
  equipment_uppy.on('file-removed', (file) => {
     console.log(file)
  })
     
 equipment_uppy.on('complete', function(result) {  
    console.log(result)
  })
  
<Dashboard 
 uppy={equipment_uppy}
id='equipment_location_image'
width='100%'
height='180px' 
>  
</Dashboard>

我希望这有效谢谢

【讨论】：