本文主要是介绍avue crud 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-buttonv-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相关问题，如果更新版本依然无效可以尝试上述方法。
这篇关于avue crud upload组件 增加自定义参数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
