【elementUI】自定義封裝el-upload上傳内容

文章目錄

為實作如圖所示功能，點選第一步彈出模态框，第二部将所有檔案導入，第三步點選确定的時候上傳到背景接口，封裝一個元件

1.搭建template

<div style="display: inline-block; margin-left: 10px;">
    <el-button type="warning"
               class="filter-item"
               icon="el-icon-upload"
               @click="uploadDialog">導入</el-button>
    <el-dialog title="提示"
               :visible.sync="uploadBox"
               width="30%">
      <el-upload class="upload-demo"
                 ref="uploadForm"
                 :http-request="upLoad"
                 action
                 multiple
                 drag
                 :before-remove="beforeRemove"
                 :file-list="fileList"
                 :auto-upload="false"
                 :limit="1">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">點選将檔案傳入</div>
      </el-upload>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="uploadBox = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
           

閱讀官方文檔可知，主要的參數屬性為：

action：必選參數，上傳的位址，string類型

為實作自定義上傳的内容，即上傳的網址為後端提供的接口，需要修改如下屬性：

http-request:覆寫預設的上傳行為，可以自定義上傳的實作

為實作第三步，點選确定之後再上傳，需要修改的屬性為：

auto-upload:是否在選取檔案後立即進行上傳，改為false

其他限制屬性（以本文為例）：

multiple 是否支援多選檔案 boolean

drag 是否啟用拖拽上傳 boolean

before-remove 删除檔案之前的鈎子，參數為上傳的檔案和檔案清單，若傳回 false 或者傳回 Promise 且被 reject，則停止删除。 function(file, fileList)

limit 最大允許上傳個數 number

file-list 上傳的檔案清單, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}] array

其他屬性可見elementUI官方網站

2.需要從父級接收到需要上傳的網址，本文還封裝了一下axios

api/api.js檔案

export function getUpload (url, data) {
  return request({
    method: 'post',
    url,
    data
  })
}
           

getOrderList：為清單渲染的方法

完整代碼

<template>
  <div style="display: inline-block; margin-left: 10px;">
    <el-button type="warning"
               class="filter-item"
               icon="el-icon-upload"
               @click="uploadDialog">導入</el-button>
    <el-dialog title="提示"
               :visible.sync="uploadBox"
               width="30%">
      <el-upload class="upload-demo"
                 ref="uploadForm"
                 :http-request="upLoad"
                 action
                 multiple
                 drag
                 :before-remove="beforeRemove"
                 :file-list="fileList"
                 :auto-upload="false"
                 :limit="1">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">點選将檔案傳入</div>
      </el-upload>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="uploadBox = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUpload } from '@/api/api';
export default {
  props: ['url', 'getOrderList'],
  data () {
    return {
      //點選導入的内容
      fileList: [],
      //彈出傳入檔案的框
      uploadBox: false
    }
  },

  methods: {
    beforeRemove (file, fileList) {
      // 檔案清單移出之前的鈎子
      return this.$confirm(`确定移除 ${file.name}？`);

    },

    upLoad (item) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let formDatas = new FormData();
      formDatas.append('file', item.file)


      getUpload(this.url, formDatas).then(res => {
        loading.close();
        if (res.data.code == 0) {
          this.$message({
            message: '上傳成功',
            type: 'success'
          });
          this.fileList = []
          this.getOrderList()
        } else {
          loading.close();
          this.$message({
            message: "上傳失敗",
            type: 'error'
          });
          this.fileList = []
        }
      })
    },
    //彈出要傳入的模态框
    uploadDialog () {
      this.uploadBox = true
    },
    submitUpload () {
      this.$refs.uploadForm.submit();
      this.uploadBox = false;



    }
  }

}
</script>

<style>
</style>
           

如果沒有對axios進行二次封裝,upLoad中的方法可以寫為：

upLoad (item) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let formDatas = new FormData();
      formDatas.append('file', item.file)


      axios.post(this.url, formDatas).then(res => {
        loading.close();
        if (res.data.code == 0) {
          this.$message({
            message: '上傳成功',
            type: 'success'
          });
          this.fileList = []
          this.getOrderList()
        } else {
          loading.close();
          this.$message({
            message: "上傳失敗",
            type: 'error'
          });
          this.fileList = []
        }
      })
    },