vue+element?upload上傳帶參數(shù)的實(shí)例

更新時(shí)間：2022年04月24日 17:18:20 作者：QQ帝國(guó)

這篇文章主要介紹了vue+element?upload上傳帶參數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element upload上傳帶參數(shù)

<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">保存</el-button>

   <el-upload
    class="upload-demo"
    ref="upload"
    :action="action()"
    :on-preview="handlePreview"
    :before-upload="beforeUpload"  
    :data="uploadData"    
    :on-error = "error"
    :on-success="successResave"
    :on-remove="handleRemove"
    :file-list="fileList"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
    <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button> -->
    <!-- <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> -->
    </el-upload>

data里面參數(shù)

uploadData:null,

methods里面

action(){
       return this.portC+"uplodResultsScore"
     },
     //上傳
     submitUpload() {
 
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
 
        console.log(file);
      },
      beforeUpload (file) {     
          
         this.uploadData = {dstype:this.proType,name:this.mobanname,dsmark:this.value5,};
             console.log(this.uploadData)
            let promise = new Promise((resolve) => {
                this.$nextTick(function () {
                    resolve(true);
                });
            });
            return promise; //通過返回一個(gè)promis對(duì)象解決
     },
     //上傳成功鉤子
     successResave(response, file, fileList){
           console.log(response)
           if(response.code==10001){
              alert("保存成功")  
               this.proType="";
               this.mobanname="";
               this.value5="";
               this.$router.push("/moban")
           }
     },
    //失敗鉤子
     error(response, file, fileList){
           console.log(response)
     },
     //選擇家化實(shí)效
      selectType(val){
         console.log(val)
         if(val==1){
             this.$router.push("/new")
         }else{
             this.$router.push("/new1")
         }
      },

效果圖

element上傳函數(shù)帶參數(shù),自定義傳參

下面這是標(biāo)簽

可以看出來 :

http-request="(params) =>beforeMasterPictureUpload(params,‘ruleForm',fileList0)"

http-request 傳遞參數(shù)的方法是可以這樣寫的，其他方法一樣，但是如果寫錯(cuò)少些可能會(huì)導(dǎo)致覆蓋原來的方法。

<el-upload :class="{hidesse:hideUpload0,'avatar-uploader':true}"?
?? ??? ??? ??? ??? ??? ?multiple action="這里不需要填或者隨便寫"
? ? ? ? ? ? ? ? ? ? ? ? list-type="picture-card" :before-upload="beforeAvatarUpload"
? ? ? ? ? ? ? ? ? ? ? ? :on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList0)"
? ? ? ? ? ? ? ? ? ? ? ? :http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList0)"
? ? ? ? ? ? ? ? ? ? ? ? :on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList0')"
? ? ? ? ? ? ? ? ? ? ? ? :on-exceed="OnExceed"
? ? ? ? ? ? ? ? ? ? ? ? :on-remove="(params) =>handleRemove(params,'ruleForm',fileList0,'fileList0')" :limit="5"
? ? ? ? ? ? ? ? ? ? ? ? :file-list="fileList0" @click="titext">
? ? ? ? ? ? ? ? ? ? ? ? <i class="el-icon-plus"></i>
? ? ? ? ? ? ? ? ? ? </el-upload>

下面是JS 接受方法同樣我們拿 http-request 這個(gè)方法做例子

beforeMasterPictureUpload(params, fromData, prop) {
?? ?console.log('----aaaa', this.fileList);
? ? console.log('file', params, fromData, prop);
}

大家可以輸出看看結(jié)果是否有拿到你上面?zhèn)鬟f過來的字符串或者是值

我將源碼放上

HTML標(biāo)簽

<el-upload :class="{hidesse:hideUpload0,'avatar-uploader':true}"?
?? ??? ??? ??? ??? ??? ?multiple action="這里不需要填或者隨便寫"
? ? ? ? ? ? ? ? ? ? ? ? list-type="picture-card" :before-upload="beforeAvatarUpload"
? ? ? ? ? ? ? ? ? ? ? ? :on-preview="(params) =>handlePictureCardPreview(params,'ruleForm',fileList0)"
? ? ? ? ? ? ? ? ? ? ? ? :http-request="(params) =>beforeMasterPictureUpload(params,'ruleForm',fileList0)"
? ? ? ? ? ? ? ? ? ? ? ? :on-change="(params,fileList) =>onChangeMaster(params,fileList,'ruleForm','fileList0')"
? ? ? ? ? ? ? ? ? ? ? ? :on-exceed="OnExceed"
? ? ? ? ? ? ? ? ? ? ? ? :on-remove="(params) =>handleRemove(params,'ruleForm',fileList0,'fileList0')" :limit="5"
? ? ? ? ? ? ? ? ? ? ? ? :file-list="fileList0" @click="titext">
? ? ? ? ? ? ? ? ? ? ? ? <i class="el-icon-plus"></i>
? ? ? ? ? ? ? ? ? ? </el-upload>

JS語句

// 主圖上傳之前
? ? ? ? ? ? ? ? beforeAvatarUpload(file) {
? ? ? ? ? ? ? ? ? ? console.log('主圖上傳之前:', file)
? ? ? ? ? ? ? ? ? ? const idJPG =
? ? ? ? ? ? ? ? ? ? ? ? file.type === "image/jpeg" || "image/gif" || "image/png" || "image/bmp";
? ? ? ? ? ? ? ? ? ? if (!idJPG) {
? ? ? ? ? ? ? ? ? ? ? ? this.$message.error(
? ? ? ? ? ? ? ? ? ? ? ? ? ? '123123'
? ? ? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? return idJPG;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 圖片觸發(fā)
? ? ? ? ? ? ? ? onChangeMaster(file, fileList, fromData, prop) {
? ? ? ? ? ? ? ? ? ? // fileList 當(dāng)前上傳框的數(shù)據(jù)?
? ? ? ? ? ? ? ? ? ? switch (prop) {
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList0':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload0 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList1':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload1 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList2':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload2 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList3':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload3 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList4':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload4 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'fileList5':
? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload6 = fileList.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? console.log('判斷一次', file, fileList, this.fileList0)
? ? ? ? ? ? ? ? ? ? if (this.inde > 0) {
? ? ? ? ? ? ? ? ? ? ? ? return
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? //let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
? ? ? ? ? ? ? ? ? ? ? ? //if (existFile) {
? ? ? ? ? ? ? ? ? ? ? ? ? ?// this.inde++
? ? ? ? ? ? ? ? ? ? ? ? ? // ?console.log(existFile)
? ? ? ? ? ? ? ? ? ? ? ? ? // ?this.$message.error(
? ? ? ? ? ? ? ? ? ? ? ? ? // ? ? ?'圖片重復(fù)' + existFile.name
? ? ? ? ? ? ? ? ? ? ? ? // ? ?);
? ? ? ? ? ? ? ? ? ? ? ? // ? ?// fileList.pop()
? ? ? ? ? ? ? ? ? ? ?// ? }
? ? ? ? ? ? ? ? ? ? ? ? this[prop] = fileList
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 圖片個(gè)數(shù)超出限制
? ? ? ? ? ? ? ? OnExceed(file, fileList) {
? ? ? ? ? ? ? ? ? ? this.$message.error(
? ? ? ? ? ? ? ? ? ? ? ? '每個(gè)選項(xiàng)最多上傳5張', "error"
? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? handleRemove(params, fileList, prop, item) {
? ? ? ? ? ? ? ? ? ? prop.forEach((obj, index) => {
? ? ? ? ? ? ? ? ? ? ? ? console.log(index, obj)
? ? ? ? ? ? ? ? ? ? ? ? if (params.uid == obj.uid) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? prop.splice(index, 1)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? console.log('刪除后的數(shù)組', prop);
? ? ? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? ? ? switch (item) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList0':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload0 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList1':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload1 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList2':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload2 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList3':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload3 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList4':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload4 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 'fileList5':
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { this.hideUpload6 = prop.length >= this.limitCount; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? console.log(prop.length >= this.limitCount)
? ? ? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? ? ? ? ? // this.fileList = [];
? ? ? ? ? ? ? ? ? ? this.dialogImageUrl = '';
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? handlePictureCardPreview(file, fromData, prop) {
? ? ? ? ? ? ? ? ? ? console.log(file, fromData, prop)
? ? ? ? ? ? ? ? ? ? this.dialogImageUrl = file.url;
? ? ? ? ? ? ? ? ? ? this.dialogVisible = true;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? beforeMasterPictureUpload(params, fromData, prop) {
? ? ? ? ? ? ? ? ? ? console.log('----aaaa', this.fileList);
? ? ? ? ? ? ? ? ? ? console.log('file', params, fromData, prop);
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? },