使用【lightning-file-upload】标签进行自定义开发。
fileUploadLWC.html
<template>
<lightning-card title="LWC File Upload Example" icon-name="custom:custom19">
<lightning-file-upload
label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
</template>
fileUploadLWC.js
import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class FileUploadLWC extends LightningElement {
@api recordId;
get acceptedFormats() {
return ['.pdf', '.png','.jpg','.jpeg'];
}
handleUploadFinished(event) {
// Get the list of uploaded files
const uploadedFiles = event.detail.files;
let uploadedFileNames = '';
for(let i = 0; i < uploadedFiles.length; i++) {
uploadedFileNames += uploadedFiles[i].name + ', ';
}
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNames,
variant: 'success',
}),
);
}
}
fileUploadLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
1.把Lwc配置到Account详细page上。
2.效果展示
3.下边我们看看上传的文件保存在哪里,跟当前Account的关系。
i.首先以当前AccountId为条件,对【ContentDocumentLink】进行以下检索。
SELECT Id, LinkedEntityId, ContentDocumentId,
IsDeleted, SystemModstamp, ShareType, Visibility
FROM ContentDocumentLink
where LinkedEntityId = '0016g000005bsfJAAQ'
ContentDocumentId:
0696g00000G0xO1AAJ,0696g00000I0rkiAAB,0696g00000I2Fa0AAF
ii.然后以上边的检索结果为条件对Object【ContentDocument】进行检索
SELECT Id, CreatedById, ArchivedDate,
IsDeleted, OwnerId, SystemModstamp, Title,
PublishStatus, LatestPublishedVersionId,
ParentId, LastViewedDate, LastReferencedDate,
Description, ContentSize, FileType
FROM ContentDocument
where Id in ('0696g00000G0xO1AAJ','0696g00000I0rkiAAB','0696g00000I2Fa0AAF')
iii.然后以上边的检索结果为条件对Object【ContentVersion】进行检索
SELECT Id, ContentDocumentId, IsLatest, ContentUrl,
ContentBodyId, VersionNumber, Title
FROM ContentVersion
where ContentDocumentId in ('0696g00000G0xO1AAJ','0696g00000I0rkiAAB','0696g00000I2Fa0AAF')
总结,通过上边查询,我们发现上传的文件最后存储在【ContentDocumentLink】【ContentDocument】【ContentVersion】表中。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。