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>

    希望对你有帮助

  • 相关阅读:
    新概念第二册(1)--英语口语听力课1
    外企面试课程(一)---熟悉常见的缩略词
    公司 邮件 翻译 培训 长难句 结课
    workflow
    公司 邮件 翻译 培训 长难句 20
    公司 邮件 翻译 培训 长难句 19
    Engineering Management
    公司 邮件 翻译 培训 长难句 18
    公司 邮件 翻译 培训 长难句 17
    第14.5节 利用浏览器获取的http信息构造Python网页访问的http请求头
  • 原文地址:https://www.cnblogs.com/helena000/p/11022232.html
Copyright © 2011-2022 走看看