一个vue组件:
<a-form :form="form" @submit="handleSubmit">
<a-form-item label="乐谱文件" v-bind="formItemLayout2">
<div class="dropbox">
<a-upload-dragger
v-decorator="[
'dragger',
{
valuePropName: 'fileList',
getValueFromEvent: normFile,
rules: [
{
required: true,
message: '请上传至少一个文件'
}
]
}
]"
name="files"
:multiple="true"
:customRequest="uploadFiles"
>
<p class="ant-upload-drag-icon">
<a-icon type="inbox" />
</p>
<p class="ant-upload-text">
点击或拖拽上传
</p>
<p class="ant-upload-hint">
支持单文件或多个文件
</p>
</a-upload-dragger>
</div>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 2 }">
<a-button type="primary" html-type="submit" :disabled="formError()">
提交
</a-button>
</a-form-item>
</a-form>
script标签部分内容
methods: {
normFile(e) {
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
},
uploadFiles(e) {
const file = e.file;
const reader = new FileReader();
reader.onload = function fileReadCompleted() {
uploadFile({ fileName: file.name, data: reader.result })
.then(res => {
console.log(e);
e.onSuccess(res);
})
.catch(err => {
e.onError(err);
});
};
reader.readAsBinaryString(file);
},
formError() {
const errs = this.form.getFieldsError();
return Object.keys(errs).some(field => errs[field]);
},
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log(values);
}
});
}
}
点击提交以后,执行this.form.validateFields,打印出来的是:
- composer: undefined
- credit: 10
- desp: undefined
- dragger: Array(1)
0:
- lastModified: (...)
- lastModifiedDate: (...)
- name: (...)
- originFileObj: (...)
- percent: (...)
- response: undefined
- size: (...)
- status: (...)
- type: (...)
- uid: (...)
- xhr: undefined
- lyricist: undefined
- name: "aaabcc"
- translator: undefined
- __proto__: Object
?我现在想把dragger的内容改为后端返回的内容 或者response里放进去也可以
该怎么做?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…