如何使用 Uppy 的 Dashboard 插件传递元数据
How to pass meta data using Uppy's Dashboard plugin
我是 Uppy 的初学者。我相信像您这样的专业人士可以解决这个问题。但是我无法将特定的元数据信息发送到我的上传路径。
uppy.js
// Import the plugins
const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');
const Dashboard = require('@uppy/dashboard');
const request = require('request');
const uppy = Uppy({
debug: true,
autoProceed: false,
restrictions: {
maxFileSize: 1024000,
maxNumberOfFiles: 3,
minNumberOfFiles: 1,
allowedFileTypes: ['image/*', 'video/*']
}
})
.use(Dashboard, {
trigger: '.UppyModalOpenerBtn',
inline: true,
target: '#drag-drop-area',
replaceTargetContent: true,
showProgressDetails: true,
proudlyDisplayPoweredByUppy: false,
animateOpenClose: true,
note: 'Images and video only, 1–3 files, up to 1 MB',
height: 470,
browserBackButtonClose: true,
theme: 'dark',
metaFields: [
{id: 'caption', name: 'Caption', placeholder: 'describe what the image is about'}
]
});
uppy.on('file-added', (file) =>{
console.log(file);
uppy.setFileMeta(file.meta.id, {
caption: file.name
});
});
uppy.use(XHRUpload, {
id: 'XHRUpload',
endpoint: 'http://localhost:8000/upload',
method: 'POST',
formData: true,
fieldName: 'my_file',
metaFields: ['caption'],
bundle: true
});
uppy.on('upload-success', (file, response) => {
//console.log(file.meta.caption);
console.log("File uploaded successfully ", file);
});
module.exports = uppy;
upload.js
router.post('/',(req, res, next) => {
console.log("Coming form uppy.js " , req.body);
});
module.exports = router;
我在将 'caption' 值传递到我的路线时遇到问题。当我在 Google Chrome 的开发者工具上查看 'network tab' 时,它给我一条消息 'undefined'。如果您能指出正确的方向,我将不胜感激!谢谢!
首先需要将file.meta.id
改为file.id
uppy.on('file-added', (file) =>{
console.log(file);
uppy.setFileMeta(file.id, {
test: 'hello'
});
});
但是如果你使用 bundle
你应该知道那个注释
Note: When bundle is set to true, only global uppy metadata, the one set via meta options property, is sent to the endpoint. Individual per-file metadata is ignored.
因此,如果您想为每个文件发送元数据,您应该将其更改为 false,然后您将面临对每个文件的单独请求,但所有元数据都会出现在请求中
我是 Uppy 的初学者。我相信像您这样的专业人士可以解决这个问题。但是我无法将特定的元数据信息发送到我的上传路径。
uppy.js
// Import the plugins
const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');
const Dashboard = require('@uppy/dashboard');
const request = require('request');
const uppy = Uppy({
debug: true,
autoProceed: false,
restrictions: {
maxFileSize: 1024000,
maxNumberOfFiles: 3,
minNumberOfFiles: 1,
allowedFileTypes: ['image/*', 'video/*']
}
})
.use(Dashboard, {
trigger: '.UppyModalOpenerBtn',
inline: true,
target: '#drag-drop-area',
replaceTargetContent: true,
showProgressDetails: true,
proudlyDisplayPoweredByUppy: false,
animateOpenClose: true,
note: 'Images and video only, 1–3 files, up to 1 MB',
height: 470,
browserBackButtonClose: true,
theme: 'dark',
metaFields: [
{id: 'caption', name: 'Caption', placeholder: 'describe what the image is about'}
]
});
uppy.on('file-added', (file) =>{
console.log(file);
uppy.setFileMeta(file.meta.id, {
caption: file.name
});
});
uppy.use(XHRUpload, {
id: 'XHRUpload',
endpoint: 'http://localhost:8000/upload',
method: 'POST',
formData: true,
fieldName: 'my_file',
metaFields: ['caption'],
bundle: true
});
uppy.on('upload-success', (file, response) => {
//console.log(file.meta.caption);
console.log("File uploaded successfully ", file);
});
module.exports = uppy;
upload.js
router.post('/',(req, res, next) => {
console.log("Coming form uppy.js " , req.body);
});
module.exports = router;
我在将 'caption' 值传递到我的路线时遇到问题。当我在 Google Chrome 的开发者工具上查看 'network tab' 时,它给我一条消息 'undefined'。如果您能指出正确的方向,我将不胜感激!谢谢!
首先需要将file.meta.id
改为file.id
uppy.on('file-added', (file) =>{
console.log(file);
uppy.setFileMeta(file.id, {
test: 'hello'
});
});
但是如果你使用 bundle
你应该知道那个注释
Note: When bundle is set to true, only global uppy metadata, the one set via meta options property, is sent to the endpoint. Individual per-file metadata is ignored.
因此,如果您想为每个文件发送元数据,您应该将其更改为 false,然后您将面临对每个文件的单独请求,但所有元数据都会出现在请求中