Element-ui實現合并多圖上傳（一次請求多張圖片）

loostudy 發布于2019-08-19 10:51 / 3930人閱讀

摘要：實現多圖上傳主要用到以下兩個屬性是自帶多圖上傳的，但是細心的朋友可能發現默認多圖的實現可能和我們預期有些出入，有截圖可以看出，實質是進行多次請求在上傳事件觸發后，多圖上傳的默認實現調用了三次請求。

前言

工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。

環境：

Springboot+Vue+Element-ui

正文

這次上傳使用的是Elemet-ui的uoload上傳組件，組件預留的鉤子回調還是比較充足的。

實現多圖上傳主要用到以下兩個屬性：

Elemet-ui是自帶多圖上傳的，但是細心的朋友可能發現默認多圖的實現可能和我們預期有些出入，有截圖可以看出，實質是進行多次請求：

在上傳事件觸發后，多圖上傳的默認實現調用了三次POST請求。

題主的需求正好需要的是多圖一次上傳，并且還要附帶一些基礎表單信息。
思路就是使用H5的FormData對象模擬表單上傳：

修改:auto-upload="false"屬性為false，阻止組件的自動上傳

new FormData()創建創建FormData對象

向FormData對象設置文件，并把FormData作為參數發送到后臺（后臺是java實現）

廢話這么多直接上代碼（僅寫功能實現涉及的屬性）：

前臺代碼：


 
 
 
 提交上傳

在組件標簽上設置:auto-upload="false"阻止自動上傳為手動上傳
修改 :http-request="uploadFile"覆蓋組件的默認上傳方法

 
new Vue({
        el: "#app",
        data: {
           multiple:true,
            formDate:""
        },
        mounted: function () {
        },
        methods: {
            uploadFile(file){
                this.formDate.append("file", file.file);
            },
            subPicForm(){
                this.formDate = new FormData()
                this.$refs.upload.submit();
                this.formDate.append("WS_CODE", "12133");
                let config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }
                axios.post("your URL", this.formDate,config).then( res => {
                    console.log(res)
                }).catch( res => {
                    console.log(res)
                })
            }
        }
    })

注意uploadFile()方法，這是我們覆蓋的上傳方法。我猜測在我們觸發開始上傳文件事件（ this.$refs.upload.submit()）后，組件會遍歷當前文件列表的的文件，并調用上傳(uploadFile())方法，在(uploadFile())方法里會傳入一個file參數：

紅色方框就是我們要的每個file文件。
現在思路清晰了，只要在每次調用uploadFile()方法里把遍歷到的文件append()到FormData里面，然后再在上傳按鈕的事件里將“裝載”好的FormData對象作為參數發送到服務端就好了，表單數據也是一樣的append操作，下面是后臺的java代碼：

@ResponseBody
    @RequestMapping(value = "/testPicUpload", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public String testPicUpload(@RequestParam("file") MultipartFile[] file, String) throws Exception {
        LoggerFactory.getLogger(getClass()).debug("長度"+file.length);
        return "suc";
    }

可以看到后臺拿到了我們傳上去的三張圖：

至此使用element-ui一次多圖上傳就完成了.

初次發文，如有問題請多指教。

GPU云服務器云服務器實現圖片上傳 asp實現上傳圖片 android 實現上傳圖片多圖上傳

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/76584.html

feeds流中的圖片

摘要：先來看看常見的產品中的流中的布局朋友圈純客戶端的流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。興趣部落興趣部落的圖片很簡單粗暴，之間采用了的方式，不管多圖還是單圖，統一正方形顯示。先來看看常見的產品中的feeds流中的布局： 1、朋友圈純客戶端的feeds流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。大于一張圖片則以正方形顯示，一共顯示9張圖，九宮格，多了就不排...

ghnor 2019-08-30 12:56 評論0 收藏0
feeds流中的圖片

摘要：先來看看常見的產品中的流中的布局朋友圈純客戶端的流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。興趣部落興趣部落的圖片很簡單粗暴，之間采用了的方式，不管多圖還是單圖，統一正方形顯示。先來看看常見的產品中的feeds流中的布局： 1、朋友圈純客戶端的feeds流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。大于一張圖片則以正方形顯示，一共顯示9張圖，九宮格，多了就不排...

LuDongWei 2019-08-19 18:04 評論0 收藏0
基于Node的React圖片上傳組件實現

摘要：常用的設置如下下的請求風格下的請求和不太一樣，在正式的請求發出之前都會先發一個類型為的請求作為試探，只有當該請求通過以后，正式的請求才能發向服務端。所以服務端路由我們還需要處理這樣一個請求注意該請求同樣需要設置跨域。寫在前面紅旗不倒，誓把JavaScript進行到底！今天介紹我的開源項目 Royal 里的圖片上傳組件的前后端實現原理（React + Node），花了一些時間，希望對...

cfanr 2019-08-20 10:14 評論0 收藏0