vue+element upload上传带参数的实例

element upload上传带参数

<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")
        }
     },

效果图

element上传函数带参数,自定义传参

下面这是标签

可以看出来 :

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

http-request 传递参数的方法 是可以这样写的，其他方法一样，但是如果写错少些可能会导致覆盖原来的方法。

<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 这个方法做例子

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

大家可以输出看看结果 是否有拿到你上面传递过来的字符串或者是值

我将源码放上

HTML标签

<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;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 图片触发
? ? ? ? ? ? ? ? onChangeMaster(file, fileList, fromData, prop) {
? ? ? ? ? ? ? ? ? ? // fileList 当前上传框的数据?
? ? ? ? ? ? ? ? ? ? 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(
? ? ? ? ? ? ? ? ? ? ? ? ? // ? ? ?'图片重复' + existFile.name
? ? ? ? ? ? ? ? ? ? ? ? // ? ?);
? ? ? ? ? ? ? ? ? ? ? ? // ? ?// fileList.pop()
? ? ? ? ? ? ? ? ? ? ?// ? }
? ? ? ? ? ? ? ? ? ? ? ? this[prop] = fileList
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 图片个数超出限制
? ? ? ? ? ? ? ? OnExceed(file, fileList) {
? ? ? ? ? ? ? ? ? ? this.$message.error(
? ? ? ? ? ? ? ? ? ? ? ? '每个选项最多上传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('删除后的数组', 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);
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? },

这是需求案列

来源：https://qiaoyajun.blog.csdn.net/article/details/86354267