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


Posted in Vue.js onDecember 05, 2020

需求:

1、文件大小验证

2、文件类型验证

3、额外参数传输

<template>
 <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="formHandleRemove"
 :before-upload="beforeUploadForm" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
    <el-button type="primary">上传文件</el-button>
    <span slot="tip" class="el-upload__tip" style="margin: 0 10px;">只能上传xlsx/xls/csv文件,且不超过{{formMaxSize}}M</span>
  </el-upload>
</template>
<script>
export default {
 data () {
 return {
  formMaxSize: 10, // 上传文件大小
  formFileList: [], // 显示上传文件
  uploadFormFileList: [] // 确定上传文件
 }
 },
 methods: {
 // 开始上传前验证
 beforeUploadForm (file) {
  // 验证文件大小
  if (file.size / 1024 / 1024 > this.formMaxSize) {
  this.$message({
   message: `上传文件大小不能超过${this.formMaxSize}M!`,
   type: 'warning'
  })
  return false
  }
  // 中文乱码处理
  if (file.raw) {
  let reader = new FileReader() // 读取文件内容
  reader.readAsText(file.raw, 'gb2312') // 防止中文乱码问题,不加reader.onload方法都不会触发
  reader.onload = function (e) {
   this.contentHtml = e.target.result // txt文本内容,接下来就可以对其进行校验处理了
  }
  }
  // 验证文件类型
  var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
  const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'csv'
  if (!extension) {
  this.$message({
   message: '上传文件只能是xlsx/xls/csv格式!',
   type: 'warning'
  })
  }
  return extension
 },
 // 移除上传列表中文件
 formHandleRemove (file, formFileList) {
  let thiz = this
  for (let i = 0; i < thiz.uploadFormFileList.length; i++) {
  if (thiz.uploadFormFileList[i].pname === file.name) {
   thiz.uploadFormFileList.splice(i, 1)
   break
  }
  }
 },
 // 允许上传文件个数验证
 formHandleExceed (files, formFileList) {
  this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + formFileList.length} 个文件`)
 },
 // 上传文件
 handleUploadForm (param) {
  let thiz = this
  let formData = new FormData()
  formData.append('uid', '上传文件编号') // 额外参数
  formData.append('files', param.file)
  let loading = thiz.$loading({
  lock: true,
  text: '上传中,请稍候...',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
  })
  thiz.$axios.post('http://localhost:8080/upload/file', formData).then(({data}) => {
  if (data.statusCode === 233) {
   thiz.$message('上传文件成功,' + data.message)
   thiz.formFileList = []
   thiz.uploadFormFileList = []
  } else {
   thiz.formFileList = []
   thiz.uploadFormFileList = []
   thiz.$message('上传文件失败,' + data.message)
  }
  loading.close()
  })
 }
 }
}
</script>
<style lang="scss" scoped>
</style>

总结:

关于el-upload中各属性的配置,可以看element_ui官网

后端接受上传文件和额外参数:

@RequestParam(value = "uid") String uid, @RequestParam(value = "files") MultipartFile[] files

补充知识:vue利用elementUI上传文件以及其他参数的处理方式

将文件自动上传改为false

:auto-upload="false"

点击保存的时候,调用el-upload的上传方法

代码如下(封装的上传方法)

export function mpp(data) {
 return new Promise(function(resolve, reject) {
  let data = {
   method: "POST",
   url:url,
   data:data
  }
  resolve(axios(data));
 })
}
<template>
<!--导入计划 -->
<div class="associationPlan">
 <el-form :model="dataModel" :rules="rules" ref="associationPlan" label-width="100px">
    <el-form-item label="项目名称:" prop="projectArry">
      <el-cascader :options="listOrgInfoList" v-model="dataModel.projectArry" :props="defaultProp" size="small" placeholder="请选择项目" style="width:100%;" clearable :disabled="isCompany"></el-cascader>
    </el-form-item>
     <el-form-item label="计划级别:" prop="level">
      <el-select size="small" v-model="dataModel.level" placeholder="请选择:" clearable style="width:100%;">
        <el-option v-for="(item,index) in planTypeList" :label="item.name" :value="item.number" :key="index"></el-option>
      </el-select>
      <span class="warnInfo" v-if="dataModel.level==1">一级进度计划匹配项目总工期,项目下只可建立一个,请确认后再添加!</span>
    </el-form-item>
    <el-form-item label="计划名称:" prop="name">
      <el-input v-model.number="dataModel.name" size="small"></el-input>      
    </el-form-item>   
    <el-form-item label="导入计划:">
     <el-upload accept=".mpp" style="display:inline-block;vertical-align: top;" ref="uploadAdd" action="" :auto-upload="false" :http-request="uploadImg" :on-success="uploadImgSuccess" :on-remove="handleRemove">
      <el-button size="small" type="success">请选择文件</el-button>
     </el-upload> 
    </el-form-item>
        
 </el-form>
 <div class="clickBtn">
  <el-button @click="close" size="small">取消</el-button>
  <el-button @click="commit" size="small" type="primary">保存</el-button>
 </div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { plan,mpp} from "../api/system_interface.js";
export default {
 name: "associationPlan",
 data() {
  return {
   dataModel: {
    projectId: '',
    projectArry:[],
    level:null,
    name:'',
    parentId:'0'
   },
   defaultProp: {
    children: "child",
    label: "name",
    value: "id"
   },
   //数据校验
   rules: {
    projectArry:  [{ required: true, message: "请选择项目", trigger: "blur" }],
    name:  [{ required: true, message: "请输入计划名称", trigger: "blur" }],
    level:  [{ required: true, message: "请选择计划级别", trigger: "change" }]
   
   },
   file:false,
   isCompany:false 
  };
 },
 computed: {
  ...mapState([
   'listOrgInfoList',
   'planTypeList'
  ]),
 },
 methods: {
   ...mapActions([
   'getlistOrgInfoList'
  ]),
 
  update(){
   let companyTypes = sessionStorage.getItem("companyType");
   this.isCompany = companyTypes == 4?true:false;
   this.dataModel.projectArry = JSON.parse(sessionStorage.getItem("selectArry"));
  },
 
  uploadImg (f) {
    //  if(!f){
    //  this.$message.error("请上传文件!");
    //  return
    // }
     this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1];
     let param = new FormData(); //创建form对象
     param.append('file',f.file);//通过append向form对象添加数据
     param.append('level',this.dataModel.level);//添加form表单中其他数据
     param.append('projectId',this.dataModel.projectId);//添加form表单中其他数据
     param.append('planName',this.dataModel.name);//添加form表单中其他数据
     mpp(param)//上传
     .then(response=>{
      if(response.code == "200"){
       this.$message.success("上传成功!");
       this.close();
       this.$emit("refreshData");  
       onSuccess(response.data);     
      }        
     })
     .catch(({err}) => {
      f.onError()
     })  
   },
   uploadImgSuccess(response, file, fileList) {
     // 缓存接口调用所需的文件路径
     console.log('文件上传成功')
    // this.$message.success("上传成功!");
   },
   handleRemove(file, fileList) {
     // 更新缓存文件
     console.log('文件删除')
   },
 
  //重置方法
  reset() {
   const associationPlan = this.$refs["associationPlan"];
   associationPlan.resetFields();
   this.dataModel.projectId = null;
   this.dataModel.name = '';
   this.dataModel.level = '';
   this.dataModel.projectArry = [];
  },
 
  //关闭弹框
  close() {
   this.$emit("close");
   this.reset();
  },
 
  //点击提交
  commit() {
   this.$refs["associationPlan"].validate(valid => {
    if (!valid) {
     return;
    }
    this.$refs.uploadAdd.submit();
    // this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1];
    // plan(this.dataModel)
    // .then(response => {
    //  if (response.code == "200") {
    //   this.$message.success("添加成功!");
    //   this.close();
    //   this.$emit("refreshData");
    //  } else {
    //   this.$message.error(response.msg);
    //  }
    // })
    // .catch(error => {
    // });
   });
  },
 
 }
};
</script>
<style lang="scss" scoped>
.clickBtn {
 text-align: center;
}
.warnInfo{
 // color: #feba51;
 color: rgb(64, 158, 255);
}
</style>

以上这篇vue+element_ui上传文件,并传递额外参数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
详解Vue router路由
Nov 20 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
You might like
php数据库密码的找回的步骤
2011/01/12 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
《陈毅探母》教学反思
2014/05/01 职场文书
安全生产月标语
2014/10/07 职场文书
个人务虚会发言材料
2014/10/20 职场文书
社区植树节活动总结
2015/02/06 职场文书
财务部岗位职责范本
2015/04/14 职场文书
详解python字符串驻留技术
2021/05/21 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL