上一篇头像上传功能之后，我们接着开发如何显示上传的头像。
首先在Apex类中取得对应的【ContentVersionId】
AccountInfoController.cls
代码语言：javascript复制public with sharing class AccountInfoController {
@AuraEnabled(Cacheable=true)
public static AccountInfoWrapper getAccInfoRecord(Id recordId) {
AccountInfoWrapper wrapper = new AccountInfoWrapper();
Account accountItem = [SELECT
Id,
Name
FROM Account
WHERE Id = :recordId];
wrapper.account = accountItem;
List<Contact> resultContactList = [SELECT
Id
FROM Contact
WHERE AccountId = :recordId];
if (resultContactList != null && resultContactList.size() > 0) {
wrapper.contactList = resultContactList;
}
return wrapper;
}
@AuraEnabled(Cacheable=true)
public static String getContentVersionRecord(String recordId) {
String contentVersionId = '';
List<ContentDocumentLink> contentDocumentLinkList = [SELECT Id,
LinkedEntityId,
ContentDocumentId
FROM ContentDocumentLink
WHERE LinkedEntityId =:recordId];
if(!contentDocumentLinkList.isEmpty()) {
Set<Id> documentIdSets = new Set<Id>();
for (ContentDocumentLink Item :contentDocumentLinkList) {
documentIdSets.add(Item.ContentDocumentId);
}
List<ContentVersion> contentVersionList = [SELECT Id,
ContentDocumentId
FROM ContentVersion
WHERE ContentDocumentId in:documentIdSets
AND FileType = 'JPG'
order by CreatedDate desc];
if(!contentVersionList.isEmpty()) {
contentVersionId = contentVersionList.get(0).Id;
}
}
return contentVersionId;
}
public class AccountInfoWrapper {
@AuraEnabled
public Account account;
@AuraEnabled
public List<Contact> contactList;
}
}
accountInfo.js
代码语言：javascript复制import { api, track, LightningElement } from 'lwc';
import personIcon from "@salesforce/resourceUrl/personIcon";
import getContentVersionRecord from "@salesforce/apex/AccountInfoController.getContentVersionRecord";
export default class AccountInfo extends LightningElement {
@api
account;
@track recordId;
@api
contactList;
@track imageUrl;
async connectedCallback() {
this.recordId = this.account.Id;
this.contentVersion = await getContentVersionRecord({ recordId: this.account.Id });
this.imageUrl = '/sfc/servlet.shepherd/version/download/' this.contentVersion;
}
get accountImageStyle() {
return `background-image: url(${personIcon})`;
}
handleClickForAcc(event) {
console.log('>>>>>>>this.account.Id>>::' this.account.Id);
let openUrl = '/s/accountDetails?recordId=' this.account.Id;
let target = '_self';
window.open(openUrl, target);
}
}accountInfo.html
代码语言：javascript复制<template>
<div class="grey-area" style="width: 100%;">
<lightning-layout multiple-rows="true">
<lightning-layout-item class="slds-var-p-around_xx-small" flexibility='auto' size='12'>
<lightning-layout multiple-rows="true">
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
<!-- <div class="account-image" style={accountImageStyle}></div> -->
<template if:true={imageUrl} >
<img class="img-style" src={imageUrl}/>
</template>
</lightning-layout-item>
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='11'>
<lightning-layout multiple-rows="true">
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='12'>
<h1> </h1>
</lightning-layout-item>
</lightning-layout>
<lightning-layout multiple-rows="true">
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='12'>
<div class="account-basic">
<div style="font-size: 25px;margin-left:2%;"><A onclick={handleClickForAcc}>{account.Name}</A></div>
<h5 class="account-kana" style="margin-left:2%;"></h5>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-layout-item>
</lightning-layout>
<div style="margin-left: 2%;">
<lightning-layout multiple-rows="true" style="margin-top:20px;">
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
<c-file-uploader-lwc
record-id={recordId}
></c-file-uploader-lwc>
</lightning-layout-item>
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
<h1 style="font-size:16px;font-weight:bold">基本情報</h1>
</lightning-layout-item>
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='4'>
<span class="label"></span>
<span class="value"></span>
</lightning-layout-item>
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='2'>
<span class="label"></span>
<span class="value"></span>
</lightning-layout-item>
<lightning-layout-item padding="horizontal-none" flexibility='auto' size='4'>
<span class="label"></span>
<span class="value"></span>
</lightning-layout-item>
</lightning-layout>
</div>
</lightning-layout-item>
</lightning-layout>
</div>
</template>accountInfo.css
代码语言：javascript复制.grey-area {
border-top: 1px solid #E4E5EA;
border-bottom: 1px solid #E4E5EA;
box-shadow: 0 2px 6px 0px rgb(0 0 0 / 10%);
background-color: #F8F8F8;
width: 100%;
position: relative;
z-index: 2;
height: 100%;
}
.account-image {
width: 100px;
height: 100px;
margin-right: 2rem;
border-radius: 50px;
background-color: #aaa;
background-size: cover;
background-position: center 10px;
background-repeat: no-repeat;
}
.img-style {
border-radius: 50%;
margin-top: 1%;
margin-left: 1%;
}
效果展示：
