zoukankan      html  css  js  c++  java
  • el-upload自定义上传文件,并携带其余参数,且action不报错

    用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错
     1 <template>
     2   <el-col :span="6" :mode="uploadForm">
     3     <el-form>
     4       <el-form-item>
     5         <el-upload
     6           class="upload-demo"
     7           ref="upload"
     8           action="no"
     9           :before-upload="doUpload"
    10           :file-list="uploadForm.fileList"
    11           :http-request="uploadOk"
    12           :auto-upload="false">
    13           <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    14           <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    15           <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    16         </el-upload>
    17       </el-form-item>
    18     </el-form>
    19   </el-col>
    20 </template>
    21 
    22 <script>
    23   import { mapGetters } from 'vuex'
    24   import axios from 'axios'
    25     export default {
    26       name: "upload",
    27       data() {
    28         return {
    29           uploadForm: {
    30             deptName:'',
    31             reimMent:'',
    32             fileList:[]
    33           }
    34         };
    35       },
    36       computed:{
    37         ...mapGetters([
    38           'username'
    39         ])
    40       },
    41       methods: {
    42         doUpload(file){
    43         },
    44         submitUpload() {
    45           this.$refs.upload.submit();
    46         },
    47         uploadOk(val){
    48           let fd = new FormData();
    49           fd.append('operator',this.username);
    50           fd.append('reimment','李青');
    51           fd.append('deptname','信息部');
    52           fd.append('file',val.file);
    53           // for(let i=0;i<this.files.length;i++){
    54           //   fd.append('file',this.files[i],this.files[i].name);
    55           // }
    56           axios.post(process.env.BASE_API+'/file/file',fd).then(res=>{
    57             console.log(res)
    58           })
    59         }
    60       }
    61     }
    62 </script>
    63 
    64 <style scoped>
    65 
    66 </style>

    希望对你有帮助

  • 相关阅读:
    嵌入式硬件设计时所需考虑的几个问题
    MySQL网络配置
    MySQL数据库操作技术大全
    关于硬件芯片未用引脚的处理方法
    与嵌入式软件开发相关的一些硬件知识
    C语言-联合(union)
    AtCoder Regular Contest 101 D
    AtCoder Regular Contest 101 C
    AtCoder Regular Contest 102 C
    线性基学习
  • 原文地址:https://www.cnblogs.com/helena000/p/11022232.html
Copyright © 2011-2022 走看看