? model: {
? ? prop: 'value',
? ? event: 'change'
? },
??
? props: {
? ? value: {
? ? ? type: String
? ? ? // 這個參數(shù)是v-decorator給子組件傳值用的
? ? ? // 這里不要給默認值， 在form下使用會爆警告 Warning: SquareUpload `default value` can not collect, ?please use `option.initialValue` to set default value.
? ? }
? }
? ?watch: {
? ? // 監(jiān)聽數(shù)據(jù)變化，及時提交給父組件
? ? fileList: {
? ? ? deep: true,
? ? ? immediate: true,
? ? ? handler: function (newV, oldV) {
? ? ? // 向父組件更新
? ? ? ? this.$emit('change', temp)
? ? ? }
? ? }
}

<template>
? <div class="clearfix">
? ? <a-upload
? ? ? :showRemoveIcon="false"
? ? ? :action="url"
? ? ? list-type="picture-card"
? ? ? :file-list="fileList"
? ? ? @preview="handlePreview"
? ? ? @change="handleChange"
? ? >
? ? ? <div v-if="fileList.length < max && isShow">
? ? ? ? <a-icon type="plus" />
? ? ? ? <div class="ant-upload-text">
? ? ? ? ? Upload
? ? ? ? </div>
? ? ? </div>
? ? </a-upload>
? ? <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
? ? ? <img alt="example" style="width: 100%" :src="previewImage" />
? ? </a-modal>
? </div>
</template>
<script>
import config from '@/views/constant/constantConfig'
function getBase64 (file) {
? return new Promise((resolve, reject) => {
? ? const reader = new FileReader()
? ? reader.readAsDataURL(file)
? ? reader.onload = () => resolve(reader.result)
? ? reader.onerror = error => reject(error)
? })
}
export default {
? name: 'SquareUpload',
? model: {
? ? prop: 'value',
? ? event: 'change'
? },
? props: {
? ? value: {
? ? ? type: String
? ? ? // 這個參數(shù)是v-decorator給子組件傳值用的
? ? ? // 這里不要給默認值， 在form下使用會爆警告 Warning: SquareUpload `default value` can not collect, ?please use `option.initialValue` to set default value.
? ? },
? ? // 上傳地址
? ? url: {
? ? ? type: String,
? ? ? default: config.uploadUrl
? ? },
? ? isShow: {
? ? ? type: Boolean,
? ? ? default: true
? ? },
? ? // 最多上傳數(shù)量
? ? max: {
? ? ? type: Number,
? ? ? default: 8
? ? }
? },
? data () {
? ? return {
? ? ? previewVisible: false,
? ? ? previewImage: '',
? ? ? fileList: []
? ? }
? },
? methods: {
? ? handleCancel () {
? ? ? this.previewVisible = false
? ? },
? ? // 處理預覽
? ? async handlePreview (file) {
? ? ? if (!file.url && !file.preview) {
? ? ? ? file.preview = await getBase64(file.originFileObj)
? ? ? }
? ? ? this.previewImage = file.url || file.preview
? ? ? this.previewVisible = true
? ? },
? ? handleChange ({ file, fileList }) {
? ? ? this.fileList = fileList
? ? }
? },
? watch: {
? ? // 監(jiān)聽數(shù)據(jù)變化，及時提交給父組件
? ? fileList: {
? ? ? deep: true,
? ? ? immediate: true,
? ? ? handler: function (newV, oldV) {
? ? ? ? if (this.fileList.length === 0) {
? ? ? ? ? return
? ? ? ? }
? ? ? ? this.fileList = newV
? ? ? ? const temp = this.fileList.filter(item => item.status !== 'uploading').map(item => (item.uid < 0 && item.name) || item.response.data.newFileName).join(',')
? ? ? ? // 向父組件更新
? ? ? ? this.$emit('change', temp)
? ? ? }
? ? },
? ? // 監(jiān)聽父組件傳遞過來的圖片列表信息
? ? value: {
? ? ? deep: true,
? ? ? immediate: true,
? ? ? handler: function (newV) {
? ? ? ? // 數(shù)據(jù)為空的三種情況
? ? ? ? if (newV === null || newV === '' || newV === undefined) {
? ? ? ? ? this.fileList = []
? ? ? ? ? return
? ? ? ? }
? ? ? ? let count = -1
? ? ? ? let temp = []
? ? ? ? const tempList = []
? ? ? ? temp = newV.split(',')
? ? ? ? temp.forEach(item => {
? ? ? ? ? tempList.push({
? ? ? ? ? ? uid: count,
? ? ? ? ? ? name: item,
? ? ? ? ? ? status: 'done',
? ? ? ? ? ? url: config.baseImgUrl + item
? ? ? ? ? })
? ? ? ? ? count--
? ? ? ? })
? ? ? ? this.fileList = tempList
? ? ? }
? ? }
? }
}
</script>
<style>
? /* you can make up upload button and sample style by using stylesheets */
? .ant-upload-select-picture-card i {
? ? font-size: 32px;
? ? color: #999;
? }

? .ant-upload-select-picture-card .ant-upload-text {
? ? margin-top: 8px;
? ? color: #666;
? }
</style>

? ? ? ? <a-form-item
? ? ? ? ? label="上傳標題圖片"
? ? ? ? ? :labelCol="labelCol"
? ? ? ? ? :wrapperCol="wrapperCol">
? ? ? ? ? <SquareUpload :isShow="!showable" v-decorator="['serveTitleImg', {rules: [{required: true, message: '請選擇圖片'}]}]"></SquareUpload>
? ? ? ? </a-form-item>

<template>
? <div class="main">
? ? <a-form
? ? ? id="formLogin"
? ? ? class="user-layout-login"
? ? ? ref="formLogin"
? ? ? :form="form"
? ? ? @submit="handleSubmit"
? ? >
? ? ? ? <a-form-item>
? ? ? ? ? ? <a-input
? ? ? ? ? ? ? size="large"
? ? ? ? ? ? ? type="text"
? ? ? ? ? ? ? placeholder="賬戶: "
? ? ? ? ? ? ? v-decorator="[
? ? ? ? ? ? ? ? 'username',
? ? ? ? ? ? ? ? {initialValue:'',rules: [{ required: true, message: '請輸入帳戶名或郵箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
? ? ? ? ? ? ? ]"
? ? ? ? ? ? >
? ? ? ? ? ? ? <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
? ? ? ? ? ? </a-input>
? ? ? ? ? </a-form-item>
? ? </a-form>
?</div>
</template>
?
<script>
...
export default {
? ...
? data () {
? ? return {
? ? ? ...
? ? ? form: this.$form.createForm(this),
? ? }
? },
? created () {
? ??
? },
? ...
}?
</script>

this.form.vaidateFields((err, values) => {
? ? console.log(values) // {username: ''}
})

this.form.setFieldsValue({
? ? username: '設置值'
})

this.form.resetFields()