element ui 上傳控件使用總結

 

上傳控件使用總結。

 

 

<el-form-item class="el-for-item" label="上傳升級包" :label-width="formLabelWidth">

                        <el-upload
                            class="upload-demo"
                            ref="upload" :with-credentials="true" :limit="1" :file-list="fileList" :action="uploadUrl()" :on-change="checkFile" :http-request="savefileobj" :auto-upload="false" :on-remove="handleRemove" :before-remove="beforeRemove" > <el-button size="small" type="primary">點擊上傳</el-button> </el-upload> </el-form-item>

  

:file-list="fileList" ---- 這個fileList是自己定義的一個文件列表，顯示的文件就是這個里邊的文件。

 

:action="uploadUrl()"  ----  是動態設置的文件上傳路徑。

uploadUrl(){

      return "http://?.?.?.?:8081/upgradePackage/uploadFiles";      ///   ?.?.?.?為你的IP或域名

},

 

:on-change="checkFile"  ---- 當選擇文件時觸發，通常用於判斷文件格式、文件大小規范性問題

checkFile(file,fileList){

            this.fileList = fileList;

            // console.log(file)

            // console.log(fileList.length);

 

            //限制上傳文件為5M

            var sizeIsSatisfy = file.size < 5*1024*1024 ? true:false;

            if(sizeIsSatisfy){

                this.fileSizeIsSatisfy = true;

                return true;

            }else{

                this.fileSizeIsSatisfy = false;

                return false;

            }

},

 

:http-request="savefileobj"  ----  選擇完文件后觸發方法，一般只是單純涉及到文件上傳可以使用此方法進行上傳，如果是表單連同其它數據參數在點擊確定按鈕時一同上傳時（:auto-upload="false"）通常用於存儲文件。 

savefileobj(param)

 {

            this.fileObj = param.file;

            // console.log(this.fileObj);

},

 

:auto-upload="false"   ----  是否在選取文件后立即進行上傳，默認為true。   也就是說設置成false后選擇文件后不會觸發savefileobj方法。   

可通過在方法中使用 this.$refs.upload.submit(); 觸發:http-request方法  savefileobj 詳情可見示例demo

 

                            

:before-remove="beforeRemove"   ----  刪除方法前觸發，通常用於確認刪除判定。

beforeRemove(file, fileList) {

            return this.$confirm(`確定移除 ${ file.name }？`);

},

 

 

 

 

 

demo示例

頁面彈框：

<!-- 升級包編輯彈框 -->
            <el-dialog title="升級包編輯" :visible.sync="showpackdiafrom" width="35%">
                <el-form :model="packfrom" style="height:250px;">
                    <el-form-item class="el-for-item" label="升級包名稱" :label-width="formLabelWidth">
                        <el-input v-model="packfrom.customName" autocomplete="off" class="el-input__diatext"></el-input>
                    </el-form-item>

                    <el-form-item class="el-for-item" label="設備類型" :label-width="formLabelWidth">
                    <el-select class="el-input__diatext" v-model="packfrom.deviceTypeId" placeholder="設備類型">
                        <el-option
                        v-for="item in dtypes"
                        :key="item.id"
                        :label="item.deviceName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                    </el-form-item>

                    <el-form-item class="el-for-item" label="升級包版本" :label-width="formLabelWidth">
                        <el-input v-model="packfrom.version" autocomplete="off" class="el-input__diatext"></el-input>
                    </el-form-item>
                    <el-form-item class="el-for-item" label="上傳升級包" :label-width="formLabelWidth">   

                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            :with-credentials="true"
                            :limit="1"
                            :file-list="fileList"
                            :action="uploadUrl()"
                            :on-change="checkFile"                            
                            :http-request="savefileobj"
                            :auto-upload="false"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                        >
                        <el-button size="small" type="primary">點擊上傳</el-button>
                        </el-upload>

                    </el-form-item>                    
                    <el-form-item class="el-for-cont" label="備注">
                        <el-input type="textarea" v-model="packfrom.comment"></el-input>
                    </el-form-item>
                </el-form>
                
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showpackdiafrom = false">取 消</el-button>
                    <el-button type="primary" @click="addorupdatepackinfo()">確 定</el-button>
                </div>
            </el-dialog>

 

表單提交按鈕方法：

addorupdatepackinfo()
{       
            var key= this.packfrom.id;

            //手動上傳文件，在點擊確認的時候 校驗通過才會去請求上傳文件的url
            this.$refs.upload.submit();

            if(key==""||key==null||key==undefined)
            {   //新增
                if(this.fileList.length <= 0){
                    this.$message.error("請至少上傳一個文件！");
                    return;
                }
                if(!this.fileSizeIsSatisfy){
                    this.$message.error("上傳失敗！存在文件大小超過5M！");
                    return;
                }//表單上傳
                var form = new FormData();
                form.append("file", this.fileObj);
                form.append("customName", this.packfrom.customName);
                form.append("version", this.packfrom.version);
                form.append("deviceTypeId", this.packfrom.deviceTypeId);
                form.append("comment", this.packfrom.comment);
                axios({
                    method: 'post',
                    url: `${this.$APIURL}/upgradePackage/uploadFiles`,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    data:form
                })
                .then(response => {
                    const { data } = response                
                    if(data.code=="0")
                    {
                        console.log(data);
                        this.showpackdiafrom = false;
                        this.showdpackmanager();         
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });    
                        this.packfrom={}; 
                        this.fileobj="";
                        this.fileList=[];   
                        this.fileSizeIsSatisfy=false;
                    }
                    else
                    {
                        this.$message.error(data.msg);
                    }
                }).catch(error => {
                    this.$message.error(error);
                })
            }
            else
            {        
                // 修改
                               

            }
},

 

上傳控件調用到的方法：

uploadUrl(){
            return "http://?.?.?.?:8081/upgradePackage/uploadFiles";
        },
        // 判斷文件大小
        checkFile(file,fileList){
            this.fileList = fileList;
            // console.log(file)
            // console.log(fileList.length);//限制上傳文件為5M
            var sizeIsSatisfy = file.size < 5*1024*1024 ? true:false;
            if(sizeIsSatisfy){
                this.fileSizeIsSatisfy = true;
                return true;
            }else{
                this.fileSizeIsSatisfy = false;
                return false;
            }
        },
        savefileobj(param)
        {
            this.fileObj = param.file;
            // console.log(this.fileObj);
        },
　　　　  handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`當前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`確定移除 ${ file.name }？`);
        },

 

data() 中涉及到的參數定義

 

showpackdiafrom:false,

packfrom:{},

fileList:[],

fileobj:"",    

fileSizeIsSatisfy:false,

 

 

 

 

基礎用法及參數參考地址：https://element.eleme.cn/#/zh-CN/component/upload

參考文檔：https://blog.csdn.net/qq_37025445/article/details/82876745

　　　　　http://www.mamicode.com/info-detail-2751030.html