文章目录
- 需求
- 难点
- 实现
- 总结
需求
项目前端用的avue框架 然后要做一个上传附件的表单 上传完附件把图片大小等信息回填到表单中 然后一个选择下拉框清空上传的文件
难点
- 上传文件前 把选中下拉框的值传给后台
- 上传文件后回填部分表单的信息
- 改变下拉框的值清空上传的文件
实现
表单是这样的
代码如下：
代码语言：javascript复制 {
label: '渠道',
prop: 'channel',
type: 'select',
rules: [{
required: true,
message: '请输入渠道',
trigger: 'blur'
}],
dicData: [{
label: '大众',
value: 'tppddz000'
}, {
label: '学校',
value: 'tpschool000',
}, {
label: 'tcl',
value: 'tptcl000'
}, {
label: '永创',
value: 'tpyc000'
}],
// editDisabled: true,
},
{
label: '上传应用',
prop: 'downloadLink',
type: 'upload',
loadText: '附件上传中，请稍等',
span: 24,
dataType: 'string',
// listType: 'picture-img',
data: {
channel: ''
},
propsHttp: {
res: 'data',
name:'downloadLink',
url:'downloadLink',
},
accept: 'application/vnd.android.package-archive',
// listDisplay: false,
tip: '只能上传apk文件',
action: '/admin/version/upload',
showColumn: false,
limit: 1
},
{
label: '应用icon',
prop: 'appIconLink',
type: 'upload',
listType: 'picture-img',
loadText: '附件上传中，请稍等',
accept: 'image/png, image/jpeg',
data: {
channel:''
},
propsHttp: {
res: 'data',
name: 'appIconLink',
url: 'appIconLink'
},
tip: '只能上传jpg/png文件',
action: '/admin/version/uploadIcon',
},之前列表图片一直显示不出来 然后把应用图标的listType: 'picture-img'
watch事件：
代码语言：javascript复制<avue-crud
ref="crud"
:page="page"
:data="tableData"
:permission="permissionList"
:table-loading="tableLoading"
:option="tableOption"
:upload-before="uploadBefore"
:upload-after="uploadAfter"
:upload-delete="uploadDelete"
@on-load="getList"
@row-update="handleUpdate"
@row-save="handleSave"
@search-change="searchChange"
@size-change="sizeChange"
@current-change="currentChange"
@row-del="rowDel"
v-model="form"
>
</avue-crud>
<script>
watch: {
'form.channel': {
handler(n, o) {
// console.log(n)
// console.log(o)
let ssjgid = this.findObject(this.$refs.crud.tableOption.column, 'channel');
// console.log(this.$refs.crud.tableForm)
// debugger
//新值和老值不一样时候即下拉框发生改变的时候 上传文件清空
if (n != undefined && o != undefined && n != o) {
this.$refs.crud.tableForm.downloadLink = []
}
}
}
}
methods: {
uploadBefore(file, done, loading, column) {
var downloadLink = this.findObject(this.$refs.crud.tableOption.column, 'downloadLink')
var appIconLink = this.findObject(this.$refs.crud.tableOption.column, 'appIconLink')
console.log(this.$refs.crud.tableForm);
// debugger
var channelValue = this.$refs.crud.tableForm.channel;
if (channelValue == "") {
this.$message.success('上传前请先选择渠道')
loading();
} else {
downloadLink.data.channel = channelValue;
appIconLink.data.channel = channelValue;
// debugger
done();
}
// debugger
// this.$message.success('上传前的方法')
},
uploadAfter(res, done, loading) {
// console.log(res)
console.log(res.downloadLink)
done()
if (res.downloadLink != null) {
this.$refs.crud.tableForm.appSize = res.appSize
this.$refs.crud.tableForm.checkCode = res.checkCode
}
return this.form.appSize = res.appSize;
},
}
</script>就是uploadBefore事件是上传图片前触发的事件 校验先选择渠道 uploadAfter事件是上传图片后触发的事件 回填文件大小和md5校验码 中的res就是options里的propsHttp中res
watch监听事件 form.channel与表单v-model="form"对应
总结
avue真不好整。。
参考博客： https://blog.csdn.net/leaders_forerver/article/details/108535397?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight
