antd vue form upload 上传

<template>
  <div>
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
    
      <a-form-item label="图片" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-upload
            name="file"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            :file-list="fileList"
            :customRequest="customRequest"
            list-type="picture-card"
            @preview="handlePreview"
            :remove="handelRemove"
             v-decorator="[
            'img',
            {
              rules: [
                { required: true, message: '请上传图片' }
              ],
              initialValue: fileList, //关键语句
              valuePropName: 'img', //关键语句
              getValueFromEvent: normFiles //关键语句
            }
          ]"
          >
          <div v-if="fileList.length < 1">
            <a-icon type="plus" />
            <div class="ant-upload-text">
              上传
            </div>
          </div>
          </a-upload>
      </a-form-item>
    </a-form>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  <div>
</template>

<script>
import { addCommodity } from '@/api/reservationRecycling'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      fileList:[],
      previewVisible:false,
      previewImage:''
    }
  },
  created() {
    this.getOfficialList()
  },
  methods: {
    save() {
      this.form.validateFields((err, fieldsValue) => {
        if (err) {
          return
        }
       
        if(this.fileList.length>0){
          fieldsValue.img=this.fileList[0].url
        }
        addCommodity(fieldsValue).then(({ code, msg }) => {
          if (code != 0) return this.$message.error(msg)
        })
      })
    },
// 我这里是阿里云的方式上传 可以根据自己不同的上传方式作出修改，但fileList的格式要保持一样
customRequest(data) {
      this.fileList=[data.file]
      var client = new OSS({
          region: '---',
          accessKeyId: '---',
          accessKeySecret: '---',
          bucket: '---'
        })
        let address = 'exchangeCommodity/'+new Date().getTime() + data.file.name
        client
          .multipartUpload(address, data.file)
          .then(response => {
            this.fileList=[{url:response.res.requestUrls[0].split('?')[0],status:'done',uid:'-1',name:response.name}]
          })
    },
    handelRemove(){
      this.fileList=[]
    },
    async handlePreview(file) {
      this.previewImage = file.url 
      this.previewVisible = true;
    },
    normFiles(e) {
      return e && e.fileList
    }
  }
}
</script>