vue中el-upload上傳多圖片且攜帶參數,批量而不是一張一張的解決方案


現在前端基本不是vue技術棧就是react技術棧。

vue技術棧最常用的就是element-ui的ui框架了。

在項目中,我們經常會碰到這種需求:批量上傳文件

element-ui 確實也為我們提供了<el-upload>這樣的組件,同事也暴露了很多的屬性和方法供我們使用。

但是很多人卻碰到了這樣的問題:項目需求是批量上傳,但是為什么自己上傳的時候,也成功了,但是卻是一張一張上傳的,這種上傳方式有時候並不違背我們的需求,但有時又不是我們需要的。那么,怎么解決批量上傳並攜帶參數呢,我這里寫了一個demo,

可供大家參考:

 1 <template>
 2   <div>
 3     <el-form>
 4       <el-form-item>
 5         <el-upload
 6           ref="upload"
 7           action="/as"
 8           multiple
 9           :http-request="handleUpload"
10           :auto-upload="false"
11           :limit="20">
12           <el-button size="small" type="primary">點擊上傳</el-button>
13           <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件,且不超過500kb</div>
14         </el-upload>
15       </el-form-item>
16       <el-form-item>
17         <el-button type="primary" @click="handlePush">發布</el-button>
18       </el-form-item>
19     </el-form>
20     
21   </div>
22 </template>
23 <script>
24 import axios from 'axios'
25 import { mapGetters } from 'vuex'
26 export default{
27   data() {
28       return {
29         files:[]
30       };
31     },
32   computed:{
33     ...mapGetters([
34       'taxno',
35       'username'
36     ])
37   },
38   methods: {
39     handleUpload(raw){
40       this.files.push(raw.file);
41     },
42     async handlePush(){
43       this.$refs.upload.submit() // 這里是執行文件上傳的函數,其實也就是獲取我們要上傳的文件
44       let fd = new FormData();
45       fd.append('operator',this.username)
46       fd.append('reimment',"倪楚楚")
47       fd.append('deptname',"技術部")
48       fd.append('taxno',this.taxno)
49       this.files.forEach(function (file) {
50         fd.append('file', file, file.name); // 因為要上傳多個文件,所以需要遍歷一下才行
51         //不要直接使用我們的文件數組進行上傳,你會發現傳給后台的是兩個Object
52       })
53       axios.post(process.env.BASE_API+'/file/moreFileUpload',fd).then(res=>{
54         if(res.data.status==='OK'){
55           console.log(res)
56         }
57       })
58     }
59   }
60 }
61 </script>

因為<el-upload>的action屬性是必須的,所以如果不用默認上傳,這里隨便設置一個字符串就可以了。

如果對攜帶的參數做校驗,可以用表單校驗。當校驗通過了再調上傳的接口就可以了。

 

希望這篇文章對你有所幫助!

轉載請注明出處:砌牆的磚  博客園  2019-07-30 《vue中el-upload上傳多圖片且攜帶參數,批量而不是一張一張的解決方案》


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM