咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 477|回复: 0

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

[复制链接]
  • TA的每日心情
    无聊
    2019-4-21 13:02
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    发表于 2020-12-19 13:52:04 | 显示全部楼层 |阅读模式
    需求:
    1、文件大小验证
    2、文件类型验证
    3、额外参数传输
    1. <template>
    2. <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="formHandleRemove"
    3. :before-upload="beforeUploadForm" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
    4.     <el-button type="primary">上传文件</el-button>
    5.     <span slot="tip" class="el-upload__tip" style="margin: 0 10px;">只能上传xlsx/xls/csv文件,且不超过{{formMaxSize}}M</span>
    6.   </el-upload>
    7. </template>
    8. <script>
    9. export default {
    10. data () {
    11. return {
    12.   formMaxSize: 10, // 上传文件大小
    13.   formFileList: [], // 显示上传文件
    14.   uploadFormFileList: [] // 确定上传文件
    15. }
    16. },
    17. methods: {
    18. // 开始上传前验证
    19. beforeUploadForm (file) {
    20.   // 验证文件大小
    21.   if (file.size / 1024 / 1024 > this.formMaxSize) {
    22.   this.$message({
    23.    message: `上传文件大小不能超过${this.formMaxSize}M!`,
    24.    type: 'warning'
    25.   })
    26.   return false
    27.   }
    28.   // 中文乱码处理
    29.   if (file.raw) {
    30.   let reader = new FileReader() // 读取文件内容
    31.   reader.readAsText(file.raw, 'gb2312') // 防止中文乱码问题,不加reader.onload方法都不会触发
    32.   reader.onload = function (e) {
    33.    this.contentHtml = e.target.result // txt文本内容,接下来就可以对其进行校验处理了
    34.   }
    35.   }
    36.   // 验证文件类型
    37.   var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
    38.   const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'csv'
    39.   if (!extension) {
    40.   this.$message({
    41.    message: '上传文件只能是xlsx/xls/csv格式!',
    42.    type: 'warning'
    43.   })
    44.   }
    45.   return extension
    46. },
    47. // 移除上传列表中文件
    48. formHandleRemove (file, formFileList) {
    49.   let thiz = this
    50.   for (let i = 0; i < thiz.uploadFormFileList.length; i++) {
    51.   if (thiz.uploadFormFileList[i].pname === file.name) {
    52.    thiz.uploadFormFileList.splice(i, 1)
    53.    break
    54.   }
    55.   }
    56. },
    57. // 允许上传文件个数验证
    58. formHandleExceed (files, formFileList) {
    59.   this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + formFileList.length} 个文件`)
    60. },
    61. // 上传文件
    62. handleUploadForm (param) {
    63.   let thiz = this
    64.   let formData = new FormData()
    65.   formData.append('uid', '上传文件编号') // 额外参数
    66.   formData.append('files', param.file)
    67.   let loading = thiz.$loading({
    68.   lock: true,
    69.   text: '上传中,请稍候...',
    70.   spinner: 'el-icon-loading',
    71.   background: 'rgba(0, 0, 0, 0.7)'
    72.   })
    73.   thiz.$axios.post('http://localhost:8080/upload/file', formData).then(({data}) => {
    74.   if (data.statusCode === 233) {
    75.    thiz.$message('上传文件成功,' + data.message)
    76.    thiz.formFileList = []
    77.    thiz.uploadFormFileList = []
    78.   } else {
    79.    thiz.formFileList = []
    80.    thiz.uploadFormFileList = []
    81.    thiz.$message('上传文件失败,' + data.message)
    82.   }
    83.   loading.close()
    84.   })
    85. }
    86. }
    87. }
    88. </script>
    89. <style lang="scss" scoped>
    90. </style>
    复制代码
    总结:
    关于el-upload中各属性的配置,可以看element_ui官网
    后端接受上传文件和额外参数:
    @RequestParam(value = "uid") String uid, @RequestParam(value = "files") MultipartFile[] files
    补充知识:vue利用elementUI上传文件以及其他参数的处理方式
    将文件自动上传改为false
    :auto-upload="false"
    点击保存的时候,调用el-upload的上传方法
    代码如下(封装的上传方法)
    1. export function mpp(data) {
    2. return new Promise(function(resolve, reject) {
    3.   let data = {
    4.    method: "POST",
    5.    url:url,
    6.    data:data
    7.   }
    8.   resolve(axios(data));
    9. })
    10. }
    11. <template>
    复制代码
    1. <!--导入计划 -->
    2. <div class="associationPlan">
    3. <el-form :model="dataModel" :rules="rules" ref="associationPlan" label-width="100px">
    4.     <el-form-item label="项目名称:" prop="projectArry">
    5.       <el-cascader :options="listOrgInfoList" v-model="dataModel.projectArry" :props="defaultProp" size="small" placeholder="请选择项目" style="width:100%;" clearable :disabled="isCompany"></el-cascader>
    6.     </el-form-item>
    7.      <el-form-item label="计划级别:" prop="level">
    8.       <el-select size="small" v-model="dataModel.level" placeholder="请选择:" clearable style="width:100%;">
    9.         <el-option v-for="(item,index) in planTypeList" :label="item.name" :value="item.number" :key="index"></el-option>
    10.       </el-select>
    11.       <span class="warnInfo" v-if="dataModel.level==1">一级进度计划匹配项目总工期,项目下只可建立一个,请确认后再添加!</span>
    12.     </el-form-item>
    13.     <el-form-item label="计划名称:" prop="name">
    14.       <el-input v-model.number="dataModel.name" size="small"></el-input>      
    15.     </el-form-item>   
    16.     <el-form-item label="导入计划:">
    17.      <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">
    18.       <el-button size="small" type="success">请选择文件</el-button>
    19.      </el-upload>
    20.     </el-form-item>
    21. </el-form>
    22. <div class="clickBtn">
    23.   <el-button @click="close" size="small">取消</el-button>
    24.   <el-button @click="commit" size="small" type="primary">保存</el-button>
    25. </div>
    26. </div>
    27. </template>
    复制代码
    1. <script>
    2. import { mapState, mapActions } from 'vuex';
    3. import { plan,mpp} from "../api/system_interface.js";
    4. export default {
    5. name: "associationPlan",
    6. data() {
    7.   return {
    8.    dataModel: {
    9.     projectId: '',
    10.     projectArry:[],
    11.     level:null,
    12.     name:'',
    13.     parentId:'0'
    14.    },
    15.    defaultProp: {
    16.     children: "child",
    17.     label: "name",
    18.     value: "id"
    19.    },
    20.    //数据校验
    21.    rules: {
    22.     projectArry:  [{ required: true, message: "请选择项目", trigger: "blur" }],
    23.     name:  [{ required: true, message: "请输入计划名称", trigger: "blur" }],
    24.     level:  [{ required: true, message: "请选择计划级别", trigger: "change" }]
    25.    },
    26.    file:false,
    27.    isCompany:false
    28.   };
    29. },
    30. computed: {
    31.   ...mapState([
    32.    'listOrgInfoList',
    33.    'planTypeList'
    34.   ]),
    35. },
    36. methods: {
    37.    ...mapActions([
    38.    'getlistOrgInfoList'
    39.   ]),
    40.   update(){
    41.    let companyTypes = sessionStorage.getItem("companyType");
    42.    this.isCompany = companyTypes == 4?true:false;
    43.    this.dataModel.projectArry = JSON.parse(sessionStorage.getItem("selectArry"));
    44.   },
    45.   uploadImg (f) {
    46.     //  if(!f){
    47.     //  this.$message.error("请上传文件!");
    48.     //  return
    49.     // }
    50.      this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1];
    51.      let param = new FormData(); //创建form对象
    52.      param.append('file',f.file);//通过append向form对象添加数据
    53.      param.append('level',this.dataModel.level);//添加form表单中其他数据
    54.      param.append('projectId',this.dataModel.projectId);//添加form表单中其他数据
    55.      param.append('planName',this.dataModel.name);//添加form表单中其他数据
    56.      mpp(param)//上传
    57.      .then(response=>{
    58.       if(response.code == "200"){
    59.        this.$message.success("上传成功!");
    60.        this.close();
    61.        this.$emit("refreshData");  
    62.        onSuccess(response.data);     
    63.       }        
    64.      })
    65.      .catch(({err}) => {
    66.       f.onError()
    67.      })  
    68.    },
    69.    uploadImgSuccess(response, file, fileList) {
    70.      // 缓存接口调用所需的文件路径
    71.      console.log('文件上传成功')
    72.     // this.$message.success("上传成功!");
    73.    },
    74.    handleRemove(file, fileList) {
    75.      // 更新缓存文件
    76.      console.log('文件删除')
    77.    },
    78.   //重置方法
    79.   reset() {
    80.    const associationPlan = this.$refs["associationPlan"];
    81.    associationPlan.resetFields();
    82.    this.dataModel.projectId = null;
    83.    this.dataModel.name = '';
    84.    this.dataModel.level = '';
    85.    this.dataModel.projectArry = [];
    86.   },
    87.   //关闭弹框
    88.   close() {
    89.    this.$emit("close");
    90.    this.reset();
    91.   },
    92.   //点击提交
    93.   commit() {
    94.    this.$refs["associationPlan"].validate(valid => {
    95.     if (!valid) {
    96.      return;
    97.     }
    98.     this.$refs.uploadAdd.submit();
    99.     // this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1];
    100.     // plan(this.dataModel)
    101.     // .then(response => {
    102.     //  if (response.code == "200") {
    103.     //   this.$message.success("添加成功!");
    104.     //   this.close();
    105.     //   this.$emit("refreshData");
    106.     //  } else {
    107.     //   this.$message.error(response.msg);
    108.     //  }
    109.     // })
    110.     // .catch(error => {
    111.     // });
    112.    });
    113.   },
    114. }
    115. };
    复制代码
    1. </script>
    2. <style lang="scss" scoped>
    3. .clickBtn {
    4. text-align: center;
    5. }
    6. .warnInfo{
    7. // color: #feba51;
    8. color: rgb(64, 158, 255);
    9. }
    10. </style>
    复制代码
    以上这篇vue+element_ui上传文件,并传递额外参数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持咔叽论坛。

    原文地址:https://www.jb51.net/article/201467.htm

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 01:56

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表