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>

希望对你有帮助

posted @ 2019-06-14 10:59  砌墙的砖  阅读(5708)  评论(0)  编辑  收藏  举报