vue+element upload上传带参数

最新推荐文章于 2024-08-01 16:29:24 发布

QQ帝国

最新推荐文章于 2024-08-01 16:29:24 发布

阅读量1.7w

点赞数 2

分类专栏： # Vue2.6+ 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/QQ_Empire/article/details/86354267

版权

Vue2.6+ 专栏收录该内容

174 篇文章 8 订阅

订阅专栏

<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">上传到服务器</el-button> -->
    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
    </el-upload>

data里面参数

       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; //通过返回一个promis对象解决
     },
     //上传成功钩子
     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)
     },
     //选择家化实效
      selectType(val){
         console.log(val)
         if(val==1){
             this.$router.push("/new")
         }else{
             this.$router.push("/new1")
         }
      },