之前一直使用upload组件单个上传文件，最近遇到需要上传表单字段，表单中有多个参数

下图是接口要求：

 官网上传组件中提供了响应的功能实现，但是demo中未演示，不注意看文档参数的话，可能会不知道这个：

接受一个object来作为参数传递，

我的组件这么写：

<el-upload
        class="upload-demo"
        drag
        name="file"
        :limit="1"
        :data="insertProgram"
        :on-exceed="handleFileOneExceed"
        :before-upload="beforeFileUpload"
        :on-success="handleFileSuccess"
        :on-remove="handleFileRemove"
        :file-list="fileList"
        :action="requestAddProgram">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传txt文件，格式范例：文件名为时间如:2020-03-02.txt,内容:23:00 晚间新闻</div>
      </el-upload>

data中：

data () {
    return {
      insertProgram: {
        liveId: 0
      }
}}

这样就将file 以及参数作为表单传送

上传作为mixins引入：

import {requestUploadImg} from '@/api/api'
// 混入对象上传组件。直接混入，需要覆盖上传成功后的回调
/* <el-upload
            class="upload-demo"
            drag
            name="img"
            :limit="1"
            :on-exceed="handleFileOneExceed"
            :on-success="handleFileSuccess"
            :on-remove="handleFileRemove"
            :file-list="fileList"
            :action="requestUploadFile">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-upload> */
// 混入组件需要监听 uploadFileList
const fileUpload = {
  data () {
    return {
      requestUploadFile: requestUploadImg,
      fileList: [],
      uploadFileList: []
    }
  },
  methods: {
    beforeFileUpload (file) {
      const isTXT = file.type.indexOf('text') > -1
      if (!isTXT) {
        this.$message.error('请选择txt文件')
      }
      return isTXT
    },
    handleFileOneExceed (files, fileList) {
      this.$message.warning('禁止上传多个文件')
    },
    handleFileRemove (file, fileList) {
      this.uploadFileList.splice(this.uploadFileList.findIndex(item => item === file.response.body), 1)
    },
    handleFileSuccess (res, file) {
      this.uploadFileList.push(res.body)
      this.$notify.success({
        title: '成功',
        message: '文件上传成功'
      })
    }
  }
}
export default fileUpload

 这个组件全部代码为：（可以只看关心部分的代码）：

<template>
  <div>
    <div class="model-top">
      <span class="model-title">频道管理</span>
      <div>
        <el-button type="primary" @click="openAddSource">新增</el-button>
        <el-select v-model="channelSearchForm.status" placeholder="请选择">
          <el-option
            v-for="item in channelStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input placeholder="搜索关键词" v-model="channelSearchForm.title" class="model-input">
          <el-button slot="prepend" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="coverUrls"
            label="封面"
            width="150">
            <template slot-scope="scope">
              <el-carousel height="100px" indicator-position="none">
                <el-carousel-item v-for="(item,index1) in scope.row.coverUrls.split(',')" :key="index1">
                  <el-image
                    style="width: 150px;height: 100%;"
                    :src="item"
                    fit="contain">
                  </el-image>
                </el-carousel-item>
              </el-carousel>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型">
            <template slot-scope="scope">
              <span>{{initShowType(scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="source"
            label="来源">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="linkUrl"
            label="链接地址">
          </el-table-column>
          <!--<el-table-column
            prop="beginTime"
            label="开始时间">
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间">
          </el-table-column>-->
          <el-table-column
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
            prop="uploader"
            label="上传人">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="openProgram(scope.row.id)">查看节目单</el-button>
              <el-button type="text" @click="openInsertProgram(scope.row.id)">插入节目单</el-button>
              <el-button type="text" @click="openUpdateSource(scope.row)">修改</el-button>
              <el-button type="text"
                         @click="updateSourceStatus(scope.row.id,'审核通过')"
                         :disabled="scope.row.status === '已发布' || scope.row.status === '审核通过' ">通过
              </el-button>
              <el-button type="text"
                         @click="updateSourceStatus(scope.row.id,'未通过')"
                         :disabled="scope.row.status === '未通过' || scope.row.status === '已发布' ">拒绝
              </el-button>
              <el-button type="text" @click="deleteSource(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="model-pagination">
          <el-pagination
            :current-page.sync="channelSearchForm.pageNumber"
            :page-size="channelSearchForm.pageSize"
            background
            layout="total, prev, pager, next"
            :total="pageTotal">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogAddMediaVisible" width="30%" @close="handleDialogClose">
      <el-form :model="channelForm" ref="channelForm" label-position="top" :rules="rules">
        <el-form-item label="标题：" prop="title">
          <el-input v-model="channelForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="description">
          <el-input v-model="channelForm.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面：" prop="coverUrls">
          <el-upload
            ref="uploadAvatar"
            class="avatar-uploader"
            name="img"
            :action="requestUploadImg"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :file-list="imgList"
            :on-remove="handleAvatarRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="频道地址：" prop="linkUrl">
          <el-input v-model="channelForm.linkUrl" autocomplete="off" placeholder="请输入频道地址"></el-input>
        </el-form-item>
        <el-form-item label="频道上传人：" prop="uploader">
          <el-input v-model="channelForm.uploader" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="频道来源：" prop="source">
          <el-input v-model="channelForm.source" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddMediaVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog  title="插入节目单" :visible.sync="dialogAddProgramVisible" width="30%">
      <el-upload
        class="upload-demo"
        drag
        name="file"
        :limit="1"
        :data="insertProgram"
        :on-exceed="handleFileOneExceed"
        :before-upload="beforeFileUpload"
        :on-success="handleFileSuccess"
        :on-remove="handleFileRemove"
        :file-list="fileList"
        :action="requestAddProgram">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传txt文件，格式范例：文件名为时间如:2020-03-02.txt,内容:23:00 晚间新闻</div>
      </el-upload>
    </el-dialog>
    <el-drawer
      title="节目单"
      :visible.sync="programVisible">
      <el-form style="margin: 20px">
      <el-form-item label="日期选择：">
        <el-date-picker
          v-model="dataValue"
          value-format="yyyy-MM-dd"
          type="date"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      </el-form>
      <div class="program-list">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in programList"
            :key="index"
            icon="el-icon-video-camera"
            size="large"
            color="#0bbd87"
            :timestamp="item.beginTime">
            {{item.programName}}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  requestSourceList,
  requestUpdateSourceStatus,
  requestDeleteSource,
  requestAddSource,
  requestUpdateSource,
  requestProgramList,
  requestAddProgram
} from '@/api/api'
import paging from '@/mixins/paging'
import commonData from '@/mixins/commonData'
import rules from '@/mixins/rules'
import imageUpload from '@/mixins/imageUpload'
import fileUpload from '@/mixins/fileUpload'

export default {
  name: 'index',
  mixins: [paging, commonData, rules, imageUpload, fileUpload],
  data () {
    return {
      insertProgram: {
        liveId: 0
      },
      requestAddProgram: requestAddProgram,
      dialogAddProgramVisible: false,
      programList: [
        {
          id: 0,
          liveId: 0,
          programName: '',
          programDate: '',
          beginTime: ''
        }
      ],
      programVisible: false,
      dialogTitle: '新增频道数据',
      dataValue: this.dateFormatter(new Date(), false),
      isEdit: false,
      initLinkUrlMethods: [
        {
          label: 'upload',
          value: '上传资源'
        }, {
          label: 'input',
          value: '输入地址'
        }
      ],
      selectMethod: 'input',
      programForm: {
        liveId: 0,
        beginDate: '',
        endDate: ''
      },
      channelForm: {
        id: -1,
        title: '',
        description: '',
        coverUrls: '',
        linkUrl: '',
        type: 'live',
        uploader: '',
        source: ''
      },
      dialogAddMediaVisible: false,
      tableData: [
        {
          createTime: '2020-03-02 16:25:09', // 创建时间
          uploader: 'liwenbo', // 上传人
          linkUrl: '5,', // 连接地址
          description: '河北送来蔬菜和水果1', // 描述
          id: 17, // 资源标识符Id
          coverUrls: '3,4,5', // url,url,url
          source: '新华日报', // 来源
          /* beginTime: '2020-01-02 12:00:12', // 活动类型的显示开始时间
          endTime: '2020-02-02 12:23:12', // 活动类型结束时间 */
          title: '一方有难，八方支援！！',
          type: 'activity', //
          status: '待审核'// 资源状态
        }
      ],
      // 待审核，审核通过，未通过，已发布
      channelStatus: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '待审核',
          label: '待审核'
        }, {
          value: '审核通过',
          label: '审核通过'
        }, {
          value: '未通过',
          label: '未通过'
        }
      ]
    }
  },
  mounted () {
    this.getSourceList()
  },
  watch: {
    // 分页在此已包含
    channelSearchForm: {
      handler: function (val, oldVal) {
        this.getSourceList()
      },
      deep: true
    },
    coverImgList: function (newVal, oldVal) {
      this.channelForm.coverUrls = newVal.join(',')
    },
    dataValue: {
      handler: function (newVal, oldVal) {
        this.programForm.beginDate = newVal
        this.programForm.endDate = newVal
      },
      immediate: true
    },
    programForm: {
      handler: function (newVal, oldVal) {
        this.getProgramList()
      },
      deep: true
    }
  },
  methods: {
    openInsertProgram (id) {
      this.insertProgram.liveId = id
      this.dialogAddProgramVisible = true
    },
    openProgram (id) {
      this.programForm.liveId = id
      this.programVisible = true
    },
    addProgram () {
      requestAddProgram().then(data => {
        if (data.status === 200) {
          console.log(data.body)
        } else {
          this.$notify.error({
            title: '失败',
            message: '上传节目单失败'
          })
        }
      })
    },
    getProgramList () {
      requestProgramList({params: this.programForm}).then(data => {
        if (data.status === 200) {
          this.programList = data.body
        } else {
          this.$notify.error({
            title: '失败',
            message: '获取节目单失败'
          })
        }
      })
    },
    dateFormatter (str) { // 默认返回yyyy-MM-dd HH-mm-ss
      let hasTime = arguments[1] !== false// 可传第二个参数false，返回yyyy-MM-dd
      let d = new Date(str)
      let year = d.getFullYear()
      let month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1)
      let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      let hour = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
      let minute = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
      let second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
      if (hasTime) {
        return [year, month, day].join('-') + ' ' + [hour, minute, second].join(':')
      } else {
        return [year, month, day].join('-')
      }
    },
    // 对话框关闭的回调
    handleDialogClose () {
      Object.assign(this.$data.channelForm, this.$options.data().channelForm)
      this.dialogTitle = '新增频道数据'
      this.imgList = []
      this.coverImgList = []
      this.isEdit = false
    },
    openAddSource () {
      this.dialogAddMediaVisible = true
    },
    openUpdateSource (item) {
      // 初始化表单
      this.channelForm.id = item.id
      this.channelForm.title = item.title
      this.channelForm.description = item.description
      this.channelForm.coverUrls = item.coverUrls
      this.channelForm.linkUrl = item.linkUrl
      this.channelForm.type = item.type
      this.channelForm.uploader = item.uploader
      this.channelForm.source = item.source
      this.channelForm.status = item.status
      // 填充预览图片list
      this.imgList = []
      this.coverImgList = this.channelForm.coverUrls.split(',')
      this.coverImgList.forEach((item, index) => {
        this.imgList.push(
          {
            name: index.toString(),
            url: item,
            response: {
              body: item
            }
          }
        )
      })
      // 更换接口地址
      this.isEdit = true
      // 更改对话框标题
      this.dialogTitle = '更改频道数据'
      this.dialogAddMediaVisible = true
    },
    updateSource () {
      requestUpdateSource(this.$qs.stringify(this.channelForm)).then(data => {
        if (data.status === 200) {
          this.$notify.success({
            title: '成功',
            message: '更新频道数据成功'
          })
          this.dialogAddMediaVisible = false
          this.getSourceList()
        } else {
          this.$notify.error({
            title: '失败',
            message: '更新频道数据失败'
          })
        }
      })
    },
    onSubmit () {
      this.$refs['channelForm'].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            this.updateSource()
          } else {
            requestAddSource(this.$qs.stringify(this.channelForm)).then(data => {
              if (data.status === 200) {
                this.$notify.success({
                  title: '成功',
                  message: '新增频道资源成功'
                })
                this.dialogAddMediaVisible = false
                this.getSourceList()
                // this.resetForm('BaseDataForm')
              } else {
                this.$notify.error({
                  title: '失败',
                  message: '新增频道资源失败'
                })
              }
            })
          }
        } else {
          this.$notify.error({
            title: '失败',
            message: '表单未填充完成'
          })
          return false
        }
      })
    },
    // 深度监听中包含了这部分的逻辑
    /* handleCurrentChange () {
          this.getSourceList()
        }, */
    getSourceList () {
      requestSourceList({
        params: this.channelSearchForm
      }).then(data => {
        if (data.status === 200) {
          this.tableData = data.body.data
          this.pageTotal = data.body.total
        } else {
          this.$notify.error({
            title: '失败',
            message: '查询频道数据失败'
          })
        }
      })
    },
    updateSourceStatus (id, status) {
      requestUpdateSourceStatus(this.$qs.stringify({id: id, status: status})).then(data => {
        if (data.status === 200) {
          this.$notify.success({
            title: '成功',
            message: '审核频道成功'
          })
          this.getSourceList()
        } else {
          this.$notify.error({
            title: '失败',
            message: '审核频道失败'
          })
        }
      })
    },
    deleteSource (id) {
      this.$confirm('此操作将永久删除该条频道, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        requestDeleteSource(this.$qs.stringify({id: id})).then(data => {
          if (data.status === 200) {
            this.$notify.success({
              title: '成功',
              message: '删除频道数据成功'
            })
            this.getSourceList()
          } else {
            this.$notify.error({
              title: '失败',
              message: '删除频道数据失败'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.program-list{
  padding: 0 0 0 20px;
  height: 70vh;
  overflow: auto;
}
/*.program-list::-webkit-scrollbar {
  width: 0 !important
}

.program-list {
  !*隐藏滚动条，当IE下溢出，仍然可以滚动*!
  -ms-overflow-style: none;
  !*火狐下隐藏滚动条*!
  scrollbar-width: none;
}*/
</style>