Salesforce input 标签 成熟文件上传方案,

发布时间 2023-10-07 10:13:35作者: 赫赫332

这次项目开发由于客户要求无法使用lwc标准的文件上传标签只能只能使用input标签来上传文件。下面是试验成功的方案。

注意:只能上传3mb文件,salesforce限制。也希望看到的文章大神们指点一下。

前端html

<input autocomplete="off"
                            style="padding: 0;display:none;"
                            type="file" id="file" name="file" 
                            onchange={handleFileChanges}
                             accept="image/*,.pdf,.txt,.rtf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" multiple />

  javascript 方法 

    //base64 方法
    handleFileChanges(event) {
        // this.uploadedFileList = [];
        const fileMaxSize = 1024 * 1024 * 3;
        var overSize = false;
        var emptyFile = false;
        this.fileUploadProgress = true;
        let files = event.target.files;
        if (files.length > 0) {
            for (let i = 0; i < files.length; i++) {
                let file = files[i];
                if(file.size < fileMaxSize && file.size > 0){
                    this.uploadedFileList.push({name:file.name,url:i});
                }else{
                    overSize = true;
                }
 
                if(file.size == 0){
                    emptyFile = true;
                }
            }
 
            if(overSize == true){
                this.showToast('error','ERROR','小于3mb');
                return;
            }
 
            if(emptyFile == true){
                this.showToast('error','ERROR','空文件');
                return;
            }
 
            for (let i = 0; i < files.length; i++) {
                let file = files[i];
                let freader = new FileReader();
                freader.onload = f => {
                    let base64 = 'base64,';
                    let content = freader.result.indexOf(base64) + base64.length;
                    let fileContents = freader.result.substring(content);
                    if(file.size < fileMaxSize){
                        this.filesUploaded.push({
                            Title: file.name,
                            VersionData: fileContents
                        });
                    }
                };
                freader.readAsDataURL(file);
            }
        }
    }

  

文件上传的时候由于想上传多个就需要每个文件都执行一次insert文件方法,

注意:一定要使用 async 和 await 等待每个文件上传成功后执行

    async handleInsertFileMethod(){
        this.countFileUploadSuccess = [];
        for (let index = 0; index < this.filesUploaded.length; index++) {
            const element = this.filesUploaded[index];
            const finalResult = await insertPartnerOrderFile({filesToInsert: element,partnerOrderId:this.partnerOrderId});
            if(finalResult){
                if(finalResult.status == 'success'){
                    this.countFileUploadSuccess.push(1);
                    if(this.countFileUploadSuccess.length == this.filesUploaded.length){
                        
                    }
                }else if(finalResult.status == 'fail'){
                    this.countFileUploadSuccess.push(1);
                    this.showToast('error','ERROR',finalResult.error);
                    if(this.countFileUploadSuccess.length == this.filesUploaded.length){
                       
                    }
                }
            }
        }
    }

  apx方法如下

    @AuraEnabled
    public static Map<String, Object> insertPartnerOrderFile(Object filesToInsert,String partnerOrderId){
        Map<String, Object> resMap = new Map<String, Object>();
        try {
            FileInfoWrapper fileData = (FileInfoWrapper)JSON.deserialize(JSON.serialize(filesToInsert), COP_PartnerOrderCreateCtrl.FileInfoWrapper.class);
            ContentVersion contentVersionRec = new ContentVersion();  
            contentVersionRec.Title = fileData.Title;  
            // contentVersionRec.ContentLocation = 'S'; 
            contentVersionRec.PathOnClient =  fileData.Title;  
            contentVersionRec.FirstPublishLocationId = partnerOrderId;  
            contentVersionRec.VersionData =fileData.VersionData;  
            contentVersionRec.IsMajorVersion = true;  
            insert contentVersionRec;
            resMap.put('status', 'success');
            return resMap;
        } catch (Exception e) {
            resMap.put('status', 'fail');
            resMap.put('error', e.getMessage()+'\n'+e.getStackTraceString());
        }
        return resMap;
    }

    //文件内容传输内部class
    public class FileInfoWrapper {
        public String Title;
        public Blob VersionData;
    }