使用element-ui怎么實現一個多文件上傳功能

這篇文章將為大家詳細講解有關使用element-ui怎么實現一個多文件上傳功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

上傳方案一：

先將文件上傳到七牛，再將七牛上傳返回的文件訪問路徑上傳到服務器

<div class="upload-music-container">
  <el-upload
   class="upload-music"
   ref="upload"
   action="http://up-z2.qiniup.com/"
   :data="{token:uploadToken}"
   multiple
   accept=".mp3"
   :before-upload="uploadBefore"
   :on-change="uploadChange"
   :on-success="uploadSuccess"
   :on-error="uploadError">
   <el-button size="small" type="primary">選取文件</el-button>
   <div slot="tip" class="el-upload__tip">僅支持上傳mp3文件，文件大小不超過500M</div>
  </el-upload>
  <el-button size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
</div>
 

export default {
  name: 'uploadMusic',
  data() {
   return {
    headers: {},
    uploadToken: null,
    canUploadMore: true,
    fileList: null,
   }
  },
  created() {
   this.headers = {}   //此處需要與server約定具體的header
   this.getUploadToken()
  },
  methods: {
   //獲取上傳七牛token憑證
   getUploadToken() {
    this.$http.get('xxxxxxx', {headers: this.headers}).then(response => {
     if (response.data.status == 200) {
      let resp = response.data.data
      this.uploadToken = resp.token
     } else {
      this.$message({
       message: '獲取憑證失敗，請重試',
       type: 'error'
      })
     }
    })
   },
   //獲取音頻文件時長
   getVideoPlayTime(file, fileList) {
    let self = this
    //獲取錄音時長
    try {
     let url = URL.createObjectURL(file.raw);
     //經測試，發現audio也可獲取視頻的時長
     let audioElement = new Audio(url);
     let duration;
     audioElement.addEventListener("loadedmetadata", function (_event) {
      duration = audioElement.duration;
      file.duration = duration
      self.fileList = fileList
     });
    } catch (e) {
     console.log(e)
    }
   },
   //校驗上傳文件大小
   uploadChange(file, fileList) {
    this.fileList = fileList
    let totalSize = 0
    for (let file of fileList) {
     totalSize += file.raw.size
    }
    if (totalSize > 500 * 1024 * 1024) {
     this.canUploadMore = false
     this.$message({
      message: '上傳文件不能不超過500M',
      type: 'warn'
     })
    } else {
     this.canUploadMore = true
    }
   },
   uploadBefore(file) {
    if (this.canUploadMore) {
     return true
    }
    return false
   },
   //上傳成功
   uploadSuccess(response, file, fileList) {
    this.getVideoPlayTime(file, fileList)
   },
   //上傳失敗
   uploadError(err, file, fileList) {
    console.log(err)
   },
   //上傳服務器數據格式化
   getUploadMusicList() {
    let musicList = []
    for (let file of this.fileList) {
     if (file.response && file.response.key) {
      musicList.push({
       "play_time": file.duration, //播放時長
       "size": file.size/1024,   //文件大小 單位 kb
       "song_name": file.name,   //歌曲名
       "voice_url": "xxxx"     //上傳七牛返回的訪問路徑
      })
     }
    }
    return musicList
   },
   //上傳至服務器
   submitUpload() {
    let musicList = this.getUploadMusicList()
    this.$http.post('xxxxxxxxxx', {music_list: musicList}, {headers: this.headers}).then(response => {
     if (response.data.status == 200) {
      this.$refs.upload.clearFiles() //上傳成功后清空文件列表
      this.$message({
       message: '上傳服務器成功',
       type: 'success'
      })
     } else{
      this.$message({
       message: '上傳服務器失敗，請重試',
       type: 'error'
      })
     }
    }).catch(err => {
     this.$message({
      message: '上傳服務器失敗，請重試',
      type: 'error'
     })
    })
   },
  }
 }

上傳方案二：

直接將文件上傳到服務器

<div class="upload-music-container">
  <el-upload
   class="upload-music"
   ref="upload"
   multiple
   action=""
   :auto-upload="false"
   :http-request="uploadFile">
   <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
   <el-button  size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
   <div slot="tip" class="el-upload__tip">只能上傳mp3文件，且單次不超過500M</div>
  </el-upload>
</div>

export default {
  name: 'uploadMusic',
  data() {
   return {
    fileType:'video',
    fileData: new FormData(),
    headers:{},
   }
  },

補充：element-ui實現多文件加表單參數上傳

element-ui是分圖片多次上傳，一次上傳一個圖片。

如果想一次上傳多個圖片，就得關掉自動上傳：auto-upload=‘false'，同時不使用element內置上傳函數，換成自己寫的onsubmit()

為了實現圖片的添加刪除，可在on-change與on-remove事件中取得filelist（filelist實質就是uploadFiles的別名，而uploadFiles就是element內置的用于保存待上傳文件或圖片的數組），在最后一步提交的過程中，將filelist中的值一一添加到formdata對象中（formdata.append()添加，formdata.delete()刪除），然后統一上傳。

ps：on-preview事件和<el-dialog>組件以及對應屬性、方法這一體系是用來實現圖片的點擊放大功能。被注釋掉的beforeupload只有一個實參，是針對單一文件上傳時使用到的，這里無法用上

<template>
 <div>
  <el-upload
   action="http://127.0.0.1:8000/api/UploadFile/"
   list-type="picture-card"
   :auto-upload="false"
   :on-change="OnChange"
   :on-remove="OnRemove"
   :on-preview="handlePictureCardPreview"
   :before-remove="beforeRemove"
   >
   <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
   <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  <el-button type="" @click="fun">點擊查看filelist</el-button>
  <el-button type="" @click="onSubmit">提交</el-button>
 </div>
</template>
 
<script>
import {host,batchTagInfo} from '../../api/api'
export default {
  data() {
   return {
    param: new FormData(),
    form:{},
    count:0,
    fileList:[],
    dialogVisible:false,
    dialogImageUrl:''
   };
  },
  methods: {
   handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
   },
   beforeRemove(file, fileList) {
    return this.$confirm(`確定移除 ${ file.name }？`);
   },
   OnChange(file,fileList){
    this.fileList=fileList
 
   },
   OnRemove(file,fileList){
    this.fileList=fileList
   },
   //阻止upload的自己上傳，進行再操作
   // beforeupload(file) {
   //   console.log('-------------------------')
   //   console.log(file);
   //   //創建臨時的路徑來展示圖片
   //   //重新寫一個表單上傳的方法
   //   this.param = new FormData();
   //   this.param.append('file[]', file, file.name);
   //   this.form={
   //    a:1,
   //    b:2,
   //    c:3
   //   }
   //   // this.param.append('file[]', file, file.name);
   //   this.param.append('form',form)
   //   return true;
   // },
   fun(){
    console.log('------------------------')
    console.log(this.fileList)
   },
   onSubmit(){
     this.form={
      a:1,
      b:2,
      c:3
     }
     let file=''
    for(let x in this.form){
 
     this.param.append(x,this.form[x])
    }
    for(let i=0;i<this.fileList.length;i++){
     file='file'+this.count
     this.count++
     this.param.append(file,this.fileList[i].raw)
    }
    batchTagInfo(this.param) 
     .then(res=>{
      alert(res)
     })
   }
  }
 }
</script>
<style> 
</style>

關于使用element-ui怎么實現一個多文件上傳功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。