1、需求，在表单中，有上传的必填项，如图：
2、遇到的第一坑就是，上传成功但图标一直在上传状态（没加 file-list 属性）
3、解决：添加 :file-list=“fileList”，完整代码：
// 子组件
html :
<a-form
layout="vertical"
:form="form"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 19 }"
>
<a-row :gutter="5">
<a-col :span="24">
<a-form-item
label="设备版本号："
>
<a-input
placeholder="请输入设备版本号"
v-decorator="[
'deviceModel',
{ rules: [{ required: true, message: '请输入设备版本号' }] },
]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="5">
<a-col :span="24">
<a-form-item label="测站类型：">
<a-select
placeholder="请选择测站类型"
v-decorator="[
'deviceTypeId',
{ rules: [{ required: true, message: '请选择测站类型' }] },
]"
>
<a-select-option
:value="item.id"
v-for="item in $attrs.siteTypeList"
:key="item.id"
>
{
{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="5">
<a-col :span="24">
<a-form-item label="设备厂商：">
<a-select
placeholder="请选择设备厂商"
v-decorator="[
'manufacturesId',
{ rules: [{ required: true, message: '请选择设备厂商' }] },
]"
@select="getModel"
>
<a-select-option
:value="item.id"
v-for="item in $attrs.manufactorList"
:key="item.id"
>
{
{ item.manufacturesName }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="5">
<a-col :span="24">
<a-form-item label="设备型号：">
<a-select
:disabled="isDisabled"
placeholder="请选择设备型号"
v-decorator="[
'deviceModelId',
{ rules: [{ required: true, message: '请选择设备型号' }] },
]"
>
<a-select-option
:value="item.id"
v-for="item in modelList"
:key="item.id"
>
{
{ item.modelName }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="5">
<a-col :span="24">
<a-form-item label="版本描述：">
<a-textarea
:maxLength="300"
v-decorator="['versionDes',
{ rules: [{ required: true, message: '请填写版本描述' }] },
]"
placeholder="请填写版本描述"
:auto-size="{ minRows: 3, maxRows: 5 }"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="5">
<a-col :span="24">
<a-form-item label="文件上传：">
<a-upload
v-decorator="['file',
{
rules: [{ required: true, message: '请上传文件' }]
}
]"
:customRequest="upload"
:beforeUpload="beforeUpload"
name="file"
:file-list="fileList"
>
<a-button type="primary">上传文件</a-button>
</a-upload>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="5" v-show="fileName">
<a-col :span="5">
</a-col>
<a-col :span="19">
<p class="flie-name">
<span>{
{ fileName }}</span>
</p>
</a-col>
</a-row>
<a-row :gutter="5">
<a-col :span="24">
<a-form-item label="是否可用于升级：">
<a-radio-group v-decorator="['isUpgrade', { initialValue: 'a' }]">
<a-radio value="a">
yes
</a-radio>
<a-radio value="b">
no
</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
</a-form>
js:
data() {
return {
form: this.$form.createForm(this, {
name: "form",
}),
isDisabled: true,
modelList: [],
fileList: [],
fileName: "",
}
},
methods:{
// 获取所有值
getValues() {
return new Promise((resolve, reject) => {
this.form.validateFields((err) => {
if (!err) {
let data = this.form.getFieldsValue();
console.log(data);
resolve(data);
} else {
reject(err);
}
});
})
},
// 重置所有值
resetValues() {
this.form.resetFields();
this.fileList = [];
this.fileName = "";
},
// 上传前判断
beforeUpload(file) {
let fileSize = file.size / 1024 / 1024 < 20;
if (!fileSize) {
this.$message.error("文件大小不能超过20MB!");
return false;
}
},
async upload(data) {
this.fileName = data.file.name;
const formData = new FormData();
formData.append("file", data.file);
let res = await this.$http(this.$url.ORDER_PHOTO_UPLOAD, "str", formData);
console.log(res);
if (res.data.code == 200) {
this.$message.success("上传成功");
let file = res.data.data.fileUrl;
this.form.setFieldsValue({
file
})
}
}
}
// 父组件
// 弹框确定点击事件
async handleOk() {
let data = await this.$refs.uploadCont.getValues();
console.log(data);
},
// 弹框取消点击事件
handleCancel() {
this.uploadPop = false;
this.$refs.uploadCont.resetValues();
},
4、效果和打印出的值为：
