如何在Visualforce页面中使用Lightning Web Component实现文件上传并修复异常

问题排查&修复方案 #

核心问题列表 #

• 参数大小写不匹配：Visualforce页面向LWC传参时，参数名写的是recordid（全小写），但LWC中暴露的@api属性是recordId（驼峰命名），LWC属性大小写敏感，导致参数无法正常传入，recordId为空。
• LWC模板硬编码记录ID：HTML模板中lightning-file-upload的record-id属性写死了固定ID，没有绑定传入的recordId变量，无法动态关联当前页面对应的记录。
• LWC组件引用命名不规范：Salesforce中LWC组件在Aura依赖、Lightning Out中引用时，需要将驼峰命名转换为小写+连字符格式，原代码引用的组件名不符合规范，可能导致组件无法加载。

修正后代码 #

1. Visualforce页面代码

<apex:page showheader="false" sidebar="false">
   <apex:includelightning />
   <div id="LightningComponentid" />
   
   <script>
        $Lightning.use("c:aH_UDC_AmadeusFileUpload_POC", function() {
            $Lightning.createComponent("c:ah-udc-file-upload-lwc-poc",
            {                
                recordId :  "{!$CurrentPage.parameters.id}",
            },
            "LightningComponentid",
            function(cmp) {
                console.log('LWC组件加载完成');
                console.log('当前记录ID : ' + "{!$CurrentPage.parameters.id}");
            });
        });
   </script>
</apex:page>

2. LWC HTML模板代码

<template>
   <lightning-card title="LWC文件上传示例" icon-name="custom:custom19">
      <lightning-file-upload label="上传附件"
                             name="fileUploader"
                             accept={acceptedFormats}
                             record-id={recordId}
                             onuploadfinished={handleUploadFinished}
                             multiple>
      </lightning-file-upload>
      
   </lightning-card>
</template>

3. Aura应用代码

<aura:application extends="ltng:outApp" access="Global">
    <aura:dependency resource="c:ah-udc-file-upload-lwc-poc"/>      
</aura:application>

额外校验点 #

• 确保当前登录用户对要上传文件关联的记录对象有编辑权限，对ContentVersion对象有创建权限
• 确认访问Visualforce页面时URL中携带了正确的id参数，参数值为合法的Salesforce记录ID
• 原有LWC JS逻辑无需修改可正常使用

内容的提问来源于stack exchange，提问作者Ravi Shah