vue+Element Ui 實現(xiàn)自動上傳圖片

hufeng 發(fā)布于2019-08-26 12:20 / 690人閱讀

摘要：點擊上傳文件按鈕方法自動上傳到多個圖片上傳文件上傳畫稿之前先判斷畫稿規(guī)格再插再到為了解決異步使用為了解決異步使用圖片名稱字符長度超過不能上傳提示確定是異步的小牌不能上傳提示確定大牌不能上傳提示確定插入必須使用同步

點擊上傳文件按鈕 beforeAvatarUpload方法自動上傳1到多個圖片


   上傳文件

**//上傳畫稿之前先判斷畫稿規(guī)格再插oracle 再post到php
//為了解決onload異步使用promise**

beforeAvatarUpload:function(file) {
    var _this = this;
    return new Promise(function(resolve, reject) { //為了解決onload異步使用promise
        if(file.name.length > 100){
            _this.$alert(file.name+"圖片名稱字符長度超過100,不能上傳!", "提示", {confirmButtonText: "確定"});
            reject();
            return;
        }
        var reader = new FileReader();
        var img_oracleFlag = false;
        reader.onload = function(event) { //onload是異步的
            var image = new Image();
            image.onload = function () {
                var width = this.width;
                var height = this.height;
                if (width>height && vm.radio.GGH=="小牌"){
                    _this.$alert(file.name+"不能上傳!", "提示", {confirmButtonText: "確定"});
                    reject();
                    return;
                }else if (width

云服務(wù)器 GPU云服務(wù)器 element-ui element-ui dialog組件實現(xiàn)圖片上傳 asp實現(xiàn)上傳圖片

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108523.html

相關(guān)文章

Element-ui實現(xiàn)合并多圖上傳（一次請求多張圖片）

摘要：實現(xiàn)多圖上傳主要用到以下兩個屬性是自帶多圖上傳的，但是細心的朋友可能發(fā)現(xiàn)默認多圖的實現(xiàn)可能和我們預(yù)期有些出入，有截圖可以看出，實質(zhì)是進行多次請求在上傳事件觸發(fā)后，多圖上傳的默認實現(xiàn)調(diào)用了三次請求。前言工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。環(huán)境： Springboot+Vue+Element-ui 正文這次上傳使用的是Elem...

loostudy 2019-08-19 10:51 評論0 收藏0
前端小姿勢

摘要：文章包含學(xué)習(xí)中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完或者非最佳實踐僅供參考父子組件的參考官方文檔點我父級不需要操作額外代碼子代操作方法一這個的官方會有介紹子代操作方法二通過這個實現(xiàn)的看了不少文章，這種比較多以為例子先簡單介紹文章包含學(xué)習(xí)中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完... 或者非最佳實踐僅供參考 1.父子組件的v-model 參考vue官方文檔...

JeOam 2019-08-02 16:11 評論0 收藏0
前端小姿勢

摘要：文章包含學(xué)習(xí)中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完或者非最佳實踐僅供參考父子組件的參考官方文檔點我父級不需要操作額外代碼子代操作方法一這個的官方會有介紹子代操作方法二通過這個實現(xiàn)的看了不少文章，這種比較多以為例子先簡單介紹文章包含學(xué)習(xí)中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完... 或者非最佳實踐僅供參考 1.父子組件的v-model 參考vue官方文檔...

liaosilzu2007 2019-08-23 16:48 評論0 收藏0
前端小姿勢

摘要：文章包含學(xué)習(xí)中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完或者非最佳實踐僅供參考父子組件的參考官方文檔點我父級不需要操作額外代碼子代操作方法一這個的官方會有介紹子代操作方法二通過這個實現(xiàn)的看了不少文章，這種比較多以為例子先簡單介紹文章包含學(xué)習(xí)中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完... 或者非最佳實踐僅供參考 1.父子組件的v-model 參考vue官方文檔...

LeexMuller 2019-08-29 18:31 評論0 收藏0
步步向前之Element-UI

摘要：無效方案根據(jù)交易所小時成交量占比和實時價格加權(quán)計算得到渲染結(jié)果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動固定表頭的...

Imfan 2019-08-02 11:51 評論0 收藏0