Vue Element-ui axios 多文件上傳

 

---

<template>
    <el-form ref="form" :model="formData" label-width="120px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="圖片"  prop="mediaFileUrl">
            <el-upload style="width: 100%;"
              class="upload-demo"
              ref="uploadMul"
              multiple
              action
              drag
              :limit="maxUploadSize"
              :on-exceed="uploadLimit"
              :http-request="uploadFile"
              :file-list="fileList"
              :auto-upload="false"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :on-change="uploadChange"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
              <div class="el-upload__tip" slot="tip">支持上傳jpg/png/gif文件，且不超過100M</div>
            </el-upload>
            <div v-show="progressFlag" class="head-img">
              <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
            </div>
            <el-button size="mini" type="success" @click="submitUpload">上傳到服務器</el-button>
            <el-button v-if="this.fileList.length > 0" size="mini" type="warning" @click="clearFiles">清空</el-button>
          </el-form-item>
        </el-col>
        <el-col :offset="4"></el-col>
      </el-row>
    </el-form>
</template>

<script>
import axios from 'axios'
export default {
    name: 'file-upload',
  data () {
    return {
      maxUploadSize: 10,
      progressFlag: false,
      progressPercent: 10,
      innerVisible: false,
      fileList: [],
      isViewDisabled: false,
      formData: {},
      param: {} // 上傳文件主要參數
    }
  },
  methods: {
    submitUpload () {
      if (this.fileList.length < 1) {
        this.$message.warning('請選擇文件!')
        return false
      }
      this.$refs.uploadMul.submit()
      if (this.param instanceof FormData) {
        // 附加參數
        var data = JSON.stringify([{title: 'title1'},{title: 'title2'}])
        this.param.append('list', data)

        let that = this
        that.progressFlag = true
        axios({
          url: '/api/upload',
          method: 'post',
          data: that.param,
          headers: { 'Content-Type': 'multipart/form-data' },
          onUploadProgress: progressEvent => {
            // progressEvent.loaded:已上傳文件大小
            // progressEvent.total:被上傳文件的總大小
            // 進度條
            that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0) | 0
          }
        }).then(res => {
          this.param = {}
          this.fileList = []
          console.log(res)
          if (res.data.status === 200 && that.progressPercent === 100) {
            setTimeout(function () {
              that.$message({
                message: '上傳成功！',
                type: 'success',
                duration: '2000'
              })
              that.progressFlag = false
              that.progressPercent = 0
              that.$refs.uploadMul.clearFiles()
            }, 1000)
            let result = res.data.body.data
            console.log(result)
          } else {
            setTimeout(function () {
              that.$message({
                message: res.data.msg,
                type: 'error',
                duration: '2000'
              })
              that.progressFlag = false
              that.progressPercent = 0
              that.$refs.uploadMul.clearFiles()
            }, 1000)
          }
        }).catch(() => {
          that.progressFlag = false
          that.progressPercent = 0
          that.$refs.uploadMul.clearFiles()
          that.$message({
            message: '上傳失敗！',
            type: 'error',
            duration: '2000'
          })
        })
      } else {
        console.log(this.param instanceof FormData)
      }
    },
    handleRemove (file, fileList) {
      this.$message.warning(`已移除文件:  ${file.name}!`)
      // 每移除一個文件,param重新賦值
      this.param = new FormData()
      this.fileList = [...fileList]
      this.fileList.forEach((file, index) => {
        this.param.append(`file`, file.raw) // 把單個文件重命名，存儲起來（給后台）
      })
    },
    uploadChange (file, fileList) {
      const videoType = ['image/gif', 'image/png', 'image/jpeg', 'video/mp4', 'video/flv', 'video/avi', 'video/rmvb']
      if (videoType.indexOf(file.raw.type) === -1) {
        this.$message.error(`不支持此文件格式${file.raw.type}`)
        this.$refs.uploadMul.clearFiles()
        return false
      }
      this.param = new FormData()
      this.fileList = [...fileList]
      this.fileList.forEach((file, index) => {
        this.param.append(`file`, file.raw) // 把單個文件重命名，存儲起來（給后台）
      })
    },
    // 超出上傳個數時調用
    uploadLimit (files, fileList) {
      this.$message.error(`最多允許同時上傳${this.maxUploadSize}個文件!`)
      // files.forEach((file, index) => {
      //   console.log(index)
      // })
    },
    beforeUpload (file) {
    },
    uploadFile (file) {
      // 該方法需存在,防止空action時element-ui報404異常
    },
    clearFiles () {
      this.fileList = []
      this.param = {}
      this.$refs.uploadMul.clearFiles()
    },
    // 初始化表單數據
    init () {
    }
  }
}
</script>

 

---