avue upload 增加参数

在某项目中使用avue crud upload 控件实现文件上传。想要携带参数，依据文档可配置data参数，应该于upload-before事件中进行data赋值，以达到修改参数的目的。

上源码：crud upload column

// 子grid上传信息表格（带upload字段）
export const tableUploadOption = {
  border: true,
  index: false,
  indexLabel: '序号',
  stripe: true,
  menuAlign: 'center',
  align: 'center',
  viewBtn: false,
  searchMenuSpan: 6,
  editBtn: false,
  saveBtn: false,
  addBtn: true,
  column: [
    {
      label: '编号',
      prop: 'id',
      hide: true,
      addDisplay: false
    },
    {
      hide: true,
      label: '附件上传',
      prop: 'imgUrl',
      type: 'upload',
      loadText: '附件上传中，请稍等',
      span: 24,
      props: {
        label: "fileName",
        value: "url",
      },
      propsHttp: {
        res: 'data',
        name: "fileName",
        url: "url"
      },
      tip: '上传同步至文件服务器',
      action: "/bzyz/apply/upload",
      data: {}  //指定上传参数
    },
    ...
  ]
}

vue 代码：

<avue-crud ref="upload"
                 :page.sync="page2"
                 :data="tableData2"
                 :permission="permissionList2"
                 :table-loading="tableLoading2"
                 :option="tableOption2"
                 @on-load="getList2"
                 @search-change="searchChange2"
                 @refresh-change="refreshChange2"
                 @size-change="sizeChange2"
                 @current-change="currentChange2"
                 @row-del="rowDel2"
                 :upload-error="uploadError"
                 :upload-delete="uploadDelete"
                 :upload-before="uploadBefore"  //本应在该事件中完成上传参数data赋值
                 :upload-after="uploadAfter">
        <template slot="menuLeft">
          <!-- 除了要求有上传权限，还要求选中父级记录 -->
          <el-button
            v-show="permissions.bzyz_apply_upload &&  (selectionList && selectionList.id >=0)"
            type="primary"
            icon="el-icon-upload"
            size="small"
            plain
            @click="$refs.upload.rowAdd()">上传
          </el-button>
        </template>
      </avue-crud>

对应的事件代码：

uploadBefore(file, done, loading, column) {
    column.data = {parentId: 123456};  //设置上传参数
    done();
},

但实际操作过程中，一直出现本次上传的参数为前一次传参的data数据，慢一拍。

因此使用watch监听解决，在上传之前（upload-before事件之前）进行data修改。

watch: {
// 监控选中的父级记录，当父级记录变化时重新设置upload上传参数
selectionList(val, oldVal) {
let uploadUrl = this.findObject(this.tableUploadOption.column, ‘imgUrl’);
uploadUrl.data = {pid: val.id}; //找到该数据直接修改
this.refreshChange(); //查询刷新，省略代码
}

注：在本示例中selectionList为 父级选中的行记录，即为当选中父级记录的时候进行子Grid中upload参数设置。因此该参数为在触发upload上传方法前所需监控的变量。

依据avue issue也发现了类似的与upload相关问题，如果更新版本依然无效可以尝试上述方法。