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

目录
  • element upload上传带参数
  • element上传函数带参数,自定义传参
    • 下面这是标签
    • 我将源码放上
    • 这是需求案列

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

这是需求案列

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue-cli3.0+element-ui上传组件el-upload的使用

    最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制.比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题.下面是我对element-ui的上传组件的一些改造, 点击查看源码. 我是自己维护了一个列表数据,再对这个列表数据进行一些操作,没用组件自带的.先看看我的组件模版 <template> <el-upload class="upload-demo" :limit="limit" :action=&

  • vue+element_ui上传文件,并传递额外参数操作

    需求: 1.文件大小验证 2.文件类型验证 3.额外参数传输 <template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

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

    目录 element upload上传带参数 element上传函数带参数,自定义传参 下面这是标签 我将源码放上 这是需求案列 element upload上传带参数 <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">保存</el-button> <el-upload c

  • jQuery多文件异步上传带进度条实例代码

    先给大家展示下效果图: ///作者:柯锦 ///完成时间:2016.08.16 ///多文件异步上传带进度条 (function ($) { function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, // or 1000 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes)

  • vue中实现上传文件给后台实例详解

    FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后

  • asp.net web大文件上传带进度条实例代码

    复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Syste

  • Element-ui upload上传文件限制的解决方法

    问题 在accept中添加上传文件的类型只能起到"表面"作用,选择"所有文件"之后,还是可以上传任何类型的文件,根本起不到限制作用. 解决办法 在before-upload(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传.)钩子里去做判断.这里有一个坑,当你设置了 :auto-upload="false"的时候, 这个钩子是不会被触发的,因此也可以在on-change中做判断.

  • Vue结合ElementUI上传Base64编码后的图片实例

    目录 ElementUI上传Base64编码后的图片 安装ElementUI 按需引入(当然如果需要你也可以全部引入) 上传实现 ElementUI把上传的图片转为Base64 ElementUI上传Base64编码后的图片 自我认为ElementUI还是一个很不错的写手机端的组件,所以这次做小项目的时候就用了ElementUI的Upload组件来实现图片的上传,不过ElementUI组件的上传图片更易于实现图片以File文件的形式实现,但是这次我需要把图片转换为base64编码来实现图片的上传

  • Jquery Uploadify多文件上传带进度条且传递自己的参数

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" r

  • Vue实现文件上传和下载功能

    本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 1.a标签download属性 在H5中,为a标签新增了一个download属性,来直接文件的下载,文件名就是download属性文件名. download属性暂时只支持Google Chrome 和 Mozilla Firefox,其他浏览器均不支持该属性: download是H5新增的属性,H5以前没有该属性: 2.URL.createObjectURL URL.createObjectUR

  • Element 头像上传的实战

    本篇文章用到 element官网 和 七牛云官网 element-ui 官网:https://element.eleme.io/#/zh-CN 七牛云官网:https://www.qiniu.com/ 1.七牛云注册 登录 之后 然后实名认证 2.进入对象存储后 进入空间管理 3.新建空间 在这里就能拿到 cdn测试域名 python SDK 在开发者中心可以查看 使用七牛云 就需要安装他 pip install qiniu 我们使用封装的思想 进行封装使用 文件名:comm.py # 七牛云

随机推荐