Salesforce LWC學習(二十七) File Upload

zero.zhang發表於2020-09-29

Salesforce

本篇參考：

https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation

https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification

在salesforce中，上傳附件是一個經常做的操作，在標準的功能基礎上，lwc自然也封裝了自定義的實現。我們有上傳文件需求的時候，通常有以下的幾點需求和考慮：

是否支援多檔案上傳
是否支援大檔案上傳
是否可以限制上傳檔案的型別
是否可以對檔案進行解析(目前demo中僅限csv)

根據上述的幾點需求和考慮，本篇採用兩種方式來實現檔案上傳操作來契合這些要求。

一. lightning-file-upload實現大檔案上傳

使用此種方式的優缺點：

優點：

支援大檔案上傳；
可以限制上傳檔案型別；
支援多檔案上傳；

缺點：

不支援檔案解析。

demo如下：

fileUploadSample.html：上面的連結中給出了 lightning-file-upload的使用方法，通過設定 label展示上傳元件的label名稱，record-id用來指定當前上傳的這些檔案將作為 note & Attachment繫結在哪條資料下，accept指定了限制的格式， uploadfinished是元件自身封裝的事件，用於上傳完成之後執行的事件，multiple設定 true/false來指定當前的元件是否支援多個檔案上傳。

<template>
    <lightning-card title="File Upload">
        <lightning-file-upload
            label="上傳附件"
            name="fileUploader"
            accept={acceptedFormats}
            record-id={recordId}
            onuploadfinished={handleUploadFinishedEvent}
            multiple>
    </lightning-file-upload>
    </lightning-card>
</template>

fileUploadSample.js：方法用來指定當前只接受csv，上傳成功以後toast資訊展示相關的上傳檔名稱。

import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class FileUploadSample extends LightningElement {
    @api recordId;

    get acceptedFormats() {
        return ['.csv'];
    }
    handleUploadFinishedEvent(event) {
        const uploadedFiles = event.detail.files;
        let uploadedFilesName = uploadedFiles.map(element => element.name);
        let uploadedFileNamesStr = uploadedFilesName.join(',');

        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNamesStr,
                variant: 'success',
            }),
        );
    }
}

結果展示：

1. 頁面初始化樣子

2. 上傳兩個檔案的UI效果，點選done即呼叫 onuploadfinished這個對應的handler

3. 展示toast訊息

4. 上傳的檔案正常的掛到了 Notes & Attachment上面

二. lightning-input 實現csv檔案上傳以及解析

此種方法優點

支援上傳檔案解析

此種方法缺點

對檔案上傳大小有嚴格限制

demo如下：

FileUploadUsingInputController：用於儲存檔案以及對csv內容進行解析，需要注意的是，當前方法只針對單個csv的單個sheet頁進行解析。

public with sharing class FileUploadUsingInputController {
    @AuraEnabled
    public static String saveFile(Id recordId, String fileName, String base64Data) {
        base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
        Blob contentBlob = EncodingUtil.base64Decode(base64Data);
        String content = bitToString(contentBlob, 'UTF-8');
        content = content.replaceAll('\r\n', '\n');
        content = content.replaceAll('\r', '\n');
        String[] fileLines = content.split('\n');
        System.debug('*** ' + JSON.serialize(fileLines));
        for(Integer i = 1; i < fileLines.size(); i++) {
            //TODO 遍歷操作
            system.debug('execute');
        }

        // inserting file
        ContentVersion cv = new ContentVersion();
        cv.Title = fileName;
        cv.PathOnClient = '/' + fileName;
        cv.FirstPublishLocationId = recordId;
        cv.VersionData = EncodingUtil.base64Decode(base64Data);
        cv.IsMajorVersion = true;
        Insert cv;
        return 'successfully';
    }

    public static String bitToString(Blob input, String inCharset){
        //轉換成16進位制
        String hex = EncodingUtil.convertToHex(input);
        //一個String型別兩個位元組 32位（bit）,則一個String長度應該為兩個16進位制的長度，所以此處向右平移一個單位，即除以2
        //向右平移一個單位在正數情況下等同於除以2，負數情況下不等
        //eg 9  00001001  >>1 00000100   結果為4
        final Integer bytesCount = hex.length() >> 1;
        //宣告String陣列，長度為16進位制轉換成字串的長度
        String[] bytes = new String[bytesCount];
        for(Integer i = 0; i < bytesCount; ++i) {
            //將相鄰兩位的16進位制字串放在一個String中
            bytes[i] =  hex.mid(i << 1, 2);
        }
        //解碼成指定charset的字串
        return EncodingUtil.urlDecode('%' + String.join(bytes, '%'), inCharset);
    }
}

fileUploadUsingInput.html:展示上傳元件以及button

<template>
    <lightning-card title="File Upload Using Input">
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size="12">
                <lightning-input label="" name="file uploader" onchange={handleFilesChange} type="file" accept={acceptedType}></lightning-input><br/>
                <div class="slds-text-body_small">{fileName}
                </div>
            </lightning-layout-item>
            <lightning-layout-item>
                <lightning-button label={UploadFile} onclick={handleSave} variant="brand"></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
        <template if:true={showLoadingSpinner}>
            <lightning-spinner alternative-text="Uploading now"></lightning-spinner>
        </template>
    </lightning-card>
</template>

fileUploadUsingInput.js：因為用string儲存，所以對檔案大小有位元組的限制。

import { LightningElement, track, api } from 'lwc';
import saveFile from '@salesforce/apex/FileUploadUsingInputController.saveFile';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class FileUploadUsingInput extends LightningElement {
    @api recordId;
    @track fileName = '';
    @track UploadFile = 'Upload File';
    @track showLoadingSpinner = false;
    filesUploaded = [];
    file;
    fileContents;
    fileReader;
    content;
    MAX_FILE_SIZE = 1500000;

    get acceptedType() {
        return ['.csv'];
    }

    handleFilesChange(event) {
        if(event.target.files.length > 0) {
            this.filesUploaded = event.target.files;
            this.fileName = event.target.files[0].name;
        }
    }

    handleSave() {
        if(this.filesUploaded.length > 0) {
            this.file = this.filesUploaded[0];
            if (this.file.size > this.MAX_FILE_SIZE) {
                window.console.log('檔案過大');
                return ;
            }
            this.showLoadingSpinner = true;
            this.fileReader= new FileReader();

            this.fileReader.onloadend = (() => {
                this.fileContents = this.fileReader.result;
                let base64 = 'base64,';
                this.content = this.fileContents.indexOf(base64) + base64.length;
                this.fileContents = this.fileContents.substring(this.content);
                this.saveToFile();
            });
            this.fileReader.readAsDataURL(this.file);
        }
        else {
            this.fileName = '選擇一個csv檔案上傳';
        }
    }


    saveToFile() {
        saveFile({ recordId: this.recordId, fileName: this.file.name, base64Data: encodeURIComponent(this.fileContents)})
        .then(result => {
            this.isTrue = true;
            this.showLoadingSpinner = false;

            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success!!',
                    message: this.fileName + ' - 上傳成功',
                    variant: 'success',
                }),
            );

        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: '上傳失敗',
                    message: error.message,
                    variant: 'error',
                }),
            );
        });
    }
}

結果展示：

1. csv中做以下的資料

2. UI效果

3. debug log中列印出來的內容

4. 格式化以後的效果，我們可以對陣列進行二次操作，通過逗號進行分割就可以獲取每一個cell對應的值，通常我們獲取資料中的for迴圈 index為1，即跳過首行標題行。

總結：篇中主要講述了關於lwc中檔案上傳以及檔案解析的簡單操作。第一種方式適合大檔案上傳，可自定製化不強但功能強悍。第二種方式可以對資料在apex端進行相關解析，但是有大小的限制。篇中有錯誤地方歡迎指出，有不懂歡迎留言。

Salesforce LWC學習(二十七) File Upload

相關文章