現在前端基本不是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上傳多圖檔且攜帶參數,批量而不是一張一張的解決方案》