Salesforce FileUpload（八）头像上传功能改进

import { LightningElement,api,track } from 'lwc';
import personIcon from "@salesforce/resourceUrl/personIcon";
import uploadFile from '@salesforce/apex/FileUploaderController.uploadFile';
export default class AccountInfoPieSeries extends LightningElement {
    @api recordId;
    fileData
    openfileUpload(event) {
        const file = event.target.files[0]
        var reader = new FileReader()
        reader.onload = () => {
            var base64 = reader.result.split(',')[1]
            this.fileData = {
                'filename': file.name,
                'base64': base64,
                'recordId': this.recordId
            }
            console.log('>>>>>111::'+this.fileData);
            this.handleClick();
        }
        reader.readAsDataURL(file);

        // const {base64, filename, recordId} = this.fileData
        // uploadFile({ base64, filename, recordId }).then(result=>{
        //     this.fileData = null
        //     let title = `${filename} uploaded successfully!!`
        //     this.toast(title)
        // })
    }

    @api maxCount;

    @api percentCount;

    @track fillPercent;

    @track isLong = 0;

    @track arcX = 0.00;

    @track arcY = 0.00;

    @track progress;

    @track titleWarning;

    @api imageUrl;

    get accountImageStyle() {
        return `background-image: url(${personIcon})`;
    }

    connectedCallback() {
        console.log('>>>>>>>>>percentCount>>>'+this.percentCount);
        console.log('>>>>>>>>>maxCount>>>'+this.maxCount);
        console.log('>>>>>>>>>>>>'+this.percentCount/this.maxCount);
        this.fillPercent = this.percentCount/this.maxCount;
        this.titleWarning = '情報充足度：' + Math.round(this.fillPercent*100) + '%';
        if (this.fillPercent > 0.5) {
            this.isLong = 1;
        } else {
            this.isLong = 0;
        }
        this.arcX = Math.cos(2*Math.PI*this.fillPercent);
        this.arcY = Math.sin(2*Math.PI*this.fillPercent) * -1;
        //this.progress = 'M 1 0 A 1 1 0 0 0 0.81 -0.59 L 0 0';
        this.progress = 'M 1 0 A 1 1 0 ' + this.isLong + ' 0 ' + this.arcX + ' ' + this.arcY + ' L 0 0';
    }

    handleClick(){
        console.log('>>>>>>>>>>>>>>>>>this.fileData>>::'+this.fileData);
        const {base64, filename, recordId} = this.fileData
        uploadFile({ base64, filename, recordId }).then(result=>{
            this.fileData = null
            let title = `${filename} uploaded successfully!!`
            this.toast(title)
        })
    }

    toast(title){
        const toastEvent = new ShowToastEvent({
            title,
            variant:"success"
        })
        this.dispatchEvent(toastEvent)
    }
}

<template>
    <!-- <lightning-progress-ring class="slds-align_absolute-center very-large" value="75" variant="warning"> </lightning-progress-ring> -->
    <div class="slds-progress-ring very-large">
        <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
        <svg viewBox="-1 -1 2 2">
            <path class="slds-progress-ring__path" id="slds-progress-ring-path-45" d={progress}></path>
        </svg>
        </div>
        <div class="slds-progress-ring__content">
        <span class="slds-icon_container slds-icon-utility-warning" title={titleWarning}>
            <input type="file" class="slds-file-selector__input slds-assistive-text"
                accept="image/jepg" id="file-upload-input-123"
                aria-describedby="error-124"
                onchange={openfileUpload}
                aria-labelledby="file-selector-primary-label-121 file-selector-secondary-label122" />
            <label class="slds-file-selector__body" for="file-upload-input-123" id="file-selector-secondary-label122">
            <template if:true={imageUrl} >
                <img class="img-style" src={imageUrl}/>
            </template>
            </label>
        </span>
        </div>
        <div class="slds-progress-ring__progress-head">
        <svg viewBox="-1 -1 2 2">
            <circle class="slds-progress-ring__path" id="slds-progress-ring-path-46"></circle>
        </svg>
        </div>
    </div>
</template>

.very-large {
  zoom: 350%;
}
.account-image {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: #aaa;
  background-size: cover;
  background-repeat: no-repeat;

}
.img-style {
  border-radius: 50%;
  margin-top: 1%;
  margin-left: 1%;
}

public with sharing class FileUploaderController {
    /*
    * @method uploadFile()
    * @desc Creates a content version from a given file's base64 and name
    *
    * @param {String} base64 - base64 string that represents the file
    * @param {String} filename - full file name with extension, i.e. 'products.csv'
    * @param {String} recordId - Id of the record you want to attach this file to
    *
    * @return {ContentVersion} - returns the created ContentDocumentLink Id if the
    *   upload was successful, otherwise returns null
    */
    @AuraEnabled
    public static String uploadFile(String base64, String filename, String recordId) {
            ContentVersion cv = createContentVersion(base64, filename);
            ContentDocumentLink cdl = createContentLink(cv.Id, recordId);
            if (cv == null || cdl == null) { return null; }
            return cdl.Id;
    }
    /*
    * @method createContentVersion() [private]
    * @desc Creates a content version from a given file's base64 and name
    *
    * @param {String} base64 - base64 string that represents the file
    * @param {String} filename - full file name with extension, i.e. 'products.csv'
    *
    * @return {ContentVersion} - returns the newly created ContentVersion, or null
    *   if there was an error inserting the record
    */
    private static ContentVersion createContentVersion(String base64, String filename) {
        ContentVersion cv = new ContentVersion();
        cv.VersionData = EncodingUtil.base64Decode(base64);
        cv.Title = filename;
        cv.PathOnClient = filename;
        try {
        insert cv;
        return cv;
        } catch(DMLException e) {
        System.debug(e);
        return null;
        }
    }

    /*
    * @method createContentLink() [private]
    * @desc Creates a content link for a given ContentVersion and record
    *
    * @param {String} contentVersionId - Id of the ContentVersion of the file
    * @param {String} recordId - Id of the record you want to attach this file to
    *
    * @return {ContentDocumentLink} - returns the newly created ContentDocumentLink,
    *   or null if there was an error inserting the record
    */
    private static ContentDocumentLink createContentLink(String contentVersionId, String recordId) {
                if (contentVersionId == null || recordId == null) { return null; }
        ContentDocumentLink cdl = new ContentDocumentLink();
        cdl.ContentDocumentId = [
        SELECT ContentDocumentId
        FROM ContentVersion
        WHERE Id =: contentVersionId
        ].ContentDocumentId;
        cdl.LinkedEntityId = recordId;
        // ShareType is either 'V', 'C', or 'I'
        // V = Viewer, C = Collaborator, I = Inferred
        cdl.ShareType = 'V';
        try {
        insert cdl;
        return cdl;
        } catch(DMLException e) {
        System.debug(e);
        return null;
        }
    }
}

<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> -->
                            <c-account-info-pie-series
                                    record-id={recordId}
                                    max-count=10
                                    percent-count=4
                                    image-url={imageUrl}
                                ></c-account-info-pie-series>
                        </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>&nbsp;</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'>
                            </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>

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);
    }
}

.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%;
}