如何将图像导入 Wix Data Collection?
How to import an image to Wix Data Collection?
我有一个名为 "Guests" 的 Wix 集合(在内容管理器中可见),其中包括 Image 类型的列。我想导入一个 CSV 文件,将外部托管的图像上传到 Wix 并保存在此字段中。
我可以导入图像列值设置为 外部 URL 的 CSV 文件,但图像文件未导入到 Wix(即图像文件每次使用时都从外部站点获取。
我尝试编写一个 myCollection_beforeInsert()
挂钩来调用 wixMediaManager.importFile()
并使用返回的 fileUrl
,但 Wix 无法将我的值识别为图像。
- 如果我将其设置为类似
'wix:image://v1/{fileUrl}'
的字符串,Wix 会抱怨 "Cell value type is Text."
- 如果我将它设置为像
{ type: 'image', src: 'wix:image://v1/{fileUrl}' }
这样的 JS 对象,Wix 会抱怨 "Cell value type is JS Object."
- 编辑:当我手动设置图像然后导出为 CSV 时,格式为
'wix:image://v1/{fileUrl}/{fileName}#originWidth={width}&originHeight={height}'
。我试过了,但是 importFile()
方法没有返回图像的宽度和高度,所以它仍然被识别为文本。
设置图像字段值的其他选项是什么?文档不清楚。 https://www.wix.com/corvid/reference/wix-data.html
我通过
完成了这项工作
- 导入带有 "imageUrl" 字段的 CSV,然后
- 导入每个文件(异步)和
- 将每个导入的文件附加到其正确数据项的 "image" 字段。
首先,我导入了一个带有 "imageUrl" 字段的 CSV。
然后我触发了一段代码(我把它放在一个页面的$w.onReady()
,但你可以把它放在任何地方),用额外的上下文调用importFile()
:
function importImages() {
wixData.query("myCollection")
.isEmpty("image")
.isNotEmpty("imageUrl")
.find() // max 1000 items
.then(result => Promise.all(result.items.map(item => {
return mediaManager.importFile('/images', item.imageUrl, {
"mediaOptions": {
"mediaType": "image"
},
"metadataOptions": {
"context": {
"itemId": item._id // <-- this is how we know which item to update later
}
}
});
}));
}
并且我为 Wix onFileUploaded
event 注册了一个事件侦听器,以更新相关数据项的图像字段。
export function wixMediaManager_onFileUploaded(event) {
if (event.context.itemId) {
// get where item._id === event.context.itemId
return wixData.get("myCollection", event.context.itemId, { suppressAuth: true })
.then(itemToUpdate => {
// set the "image" field
itemToUpdate.image = event.fileInfo.fileUrl;
return wixData.update("myCollection", itemToUpdate, { suppressAuth: true });
});
}
}
我有一个名为 "Guests" 的 Wix 集合(在内容管理器中可见),其中包括 Image 类型的列。我想导入一个 CSV 文件,将外部托管的图像上传到 Wix 并保存在此字段中。
我可以导入图像列值设置为 外部 URL 的 CSV 文件,但图像文件未导入到 Wix(即图像文件每次使用时都从外部站点获取。
我尝试编写一个 myCollection_beforeInsert()
挂钩来调用 wixMediaManager.importFile()
并使用返回的 fileUrl
,但 Wix 无法将我的值识别为图像。
- 如果我将其设置为类似
'wix:image://v1/{fileUrl}'
的字符串,Wix 会抱怨 "Cell value type is Text." - 如果我将它设置为像
{ type: 'image', src: 'wix:image://v1/{fileUrl}' }
这样的 JS 对象,Wix 会抱怨 "Cell value type is JS Object." - 编辑:当我手动设置图像然后导出为 CSV 时,格式为
'wix:image://v1/{fileUrl}/{fileName}#originWidth={width}&originHeight={height}'
。我试过了,但是importFile()
方法没有返回图像的宽度和高度,所以它仍然被识别为文本。
设置图像字段值的其他选项是什么?文档不清楚。 https://www.wix.com/corvid/reference/wix-data.html
我通过
完成了这项工作- 导入带有 "imageUrl" 字段的 CSV,然后
- 导入每个文件(异步)和
- 将每个导入的文件附加到其正确数据项的 "image" 字段。
首先,我导入了一个带有 "imageUrl" 字段的 CSV。
然后我触发了一段代码(我把它放在一个页面的$w.onReady()
,但你可以把它放在任何地方),用额外的上下文调用importFile()
:
function importImages() {
wixData.query("myCollection")
.isEmpty("image")
.isNotEmpty("imageUrl")
.find() // max 1000 items
.then(result => Promise.all(result.items.map(item => {
return mediaManager.importFile('/images', item.imageUrl, {
"mediaOptions": {
"mediaType": "image"
},
"metadataOptions": {
"context": {
"itemId": item._id // <-- this is how we know which item to update later
}
}
});
}));
}
并且我为 Wix onFileUploaded
event 注册了一个事件侦听器,以更新相关数据项的图像字段。
export function wixMediaManager_onFileUploaded(event) {
if (event.context.itemId) {
// get where item._id === event.context.itemId
return wixData.get("myCollection", event.context.itemId, { suppressAuth: true })
.then(itemToUpdate => {
// set the "image" field
itemToUpdate.image = event.fileInfo.fileUrl;
return wixData.update("myCollection", itemToUpdate, { suppressAuth: true });
});
}
}