使用antd-mobile的ImagePicker組件實現圖片的上傳

這篇文章主要是記錄一下在開發釘釘微應用時，實現圖片上傳及顯示功能的過程。

這個項目用的dingyou-dingtalk-mobile這個腳手架，可直接在NowaGui上創建。這是一個關於釘釘微應用的腳手架，關於它的介紹以及更詳細的內容，可以參考https://caohaijiang.github.io/2017/04/17/dingtalk-start/，對於剛入門使用react開發移動前端的同學還是很有幫助的。

該項目使用的前端UI是antd-mobile，其用戶手冊可以參看https://mobile.ant.design/docs/react/introduce-cn，里面提供了比較豐富的ui組件，基本上可以滿足前端的開發。

轉到重點，說一下其ImagePicker組件的實際應用。

前端的使用可以參考其用戶手冊，有比較詳盡的實例說明，之前在開發時候也比較順利的使用了這個組件，但是在將這個上傳的圖片，如何保存到后台服務器上，糾結了不少時間。網上看了不少相關文章，但是貌似都沒什么幫助。

這邊后端是通過springmvc來處理的，

    @CrossOrigin( maxAge = 3600)
    @RequestMapping("/upload")
    @ResponseBody
    public String upload(HttpServletRequest request,@RequestParam("file") MultipartFile  file) throws IOException

 

其中MultipartFIle file用來接收前端傳過來的文件，前端應該如何傳遞過來，需要使用FormDate傳遞參數。如下

            　　　　　　for(let key in this.state.files){

                        let formData = new FormData();
                        formData.append("file", this.state.files[key].file);
                        formData.append("dateId", dateId);
                        formData.append("flag", "1");
                
                        fetch(AUTH_URL + "ddoa/upload" , {
                            method: 'POST',
                            headers: {
                            },
                            body: formData,
                        }).then((response) => response.json())
                            .then((responseData)=> {

                            console.log('uploadImage', responseData);

                            Control.go("/leavedetail/"+dateId, );

                        }).catch((err)=> {
                            this.showToast();
                            const msg = response.msg;
                            Toast.info(msg, 2);
                        });
                    }                

如上，獲取file將其設置到file中，在后台即可接收到。后端通過

 FileUtils.copyInputStreamToFile(file.getInputStream(),new File(imagePath, imageName));

即可將文件上傳到imagePath指定的目錄中。完成圖片的上傳。此處需要將上傳圖片的相關的信息保存的至一張數據庫表中，該表應該包括圖片名稱、圖片實際路徑、關聯的主表Id等，根據業務進行拓展。

之后是將上傳的圖片在頁面中顯示了。

由於后端是springBoot項目，可以使用其提供的圖片服務器來顯示圖片。可參考https://www.cnblogs.com/bestxyl/p/7403297.html來實現。

再需要后端寫一個通過主鍵ID值獲取相應圖片名稱的接口，搭配圖片服務器即可顯示出來了。

前端具體可如下實現

render() {

        const listForImage = (imagesList) => {
            let images = [];
            for(let i = 0; i < imagesList.length; i++) {

                let m  = {url : AUTH_URL + 'images/' + imagesList[i].imageName,id : imagesList[i].id};

                images.push( m );
            }
            
            return images;
        }
         
        const files = 
            
            listForImage(this.state.imagesList)   
            
        ;

        return (
            <div>
                <div style={{display: this.state.imagesList.length == 0 ? 'none' : ''}}>
                <WhiteSpace size="lg" />
               
                <Card>
                <Card.Header
                    title={<span><font color="gray"> * </font>圖片</span>}
                />
                <Card.Body  style={{width : '90%'}}>
                    <ImagePicker
                        files={files}
                        onImageClick={(index, fs) => console.log(index, fs)}
                        selectable={false}
                        multiple={false}
                       
                        />
                </Card.Body>
                
                </Card>
                </div>
    　　 </div>
    );
}

 

 

 

 componentDidMount() {

    fetch( AUTH_URL + "ddoa/getImages" , {  
            method: 'POST',  
            headers: {  
            },  
            body: formData,  
          }).then((response) => {  

            if (response.ok) {  

                return response.json();  
            }  
          }).then((json) => {  
      
            const imagesList = json.images;

            this.setState({imagesList:imagesList});

          }).catch((error) => {  
             console.error(error);  
        }); 


    }