ReactJS Uppy - 状态更改后在 uppy 仪表板中显示图像 | prefill/preload 图像如何在 uppy.io 库中
ReactJS Uppy - Show images in uppy dashboard after state changes | How prefill/preload images in uppy.io library
我正在使用 Uppy Dashboard,只要状态发生变化,uppy 就会重置其状态,上传的图像不会显示。我怎样才能在我的 uppy 中 add/show 图片? prefill/preload 图片如何在 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']}
/>
确保您拥有最新版本的 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>
我希望这能奏效
谢谢
我正在使用 Uppy Dashboard,只要状态发生变化,uppy 就会重置其状态,上传的图像不会显示。我怎样才能在我的 uppy 中 add/show 图片? prefill/preload 图片如何在 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']}
/>
确保您拥有最新版本的 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>
我希望这能奏效 谢谢