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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python tkinter canvas使用实例
2019/11/04 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
班级聚会策划书
2014/01/16 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
安全协议书
2014/04/23 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
体检通知范文
2015/04/21 职场文书
小学教师教育随笔
2015/08/14 职场文书
详解JS数组方法
2021/11/20 Javascript