【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 = []
        }
      })
    },