antd vue(Ant Design Vue) upload组件

upload上传图片,不请求接口先预览图片

• window.URL.createObjectURL 可以用于在浏览器上预览本地图片或者视频
• customRequest 通过覆盖默认的上传行为，可以自定义自己的上传实现

<template>
  <div style="margin: 24px">
    <a-upload
      :file-list="fileList"
      :customRequest="customRequest"
      list-type="picture"
    >
      <a-button> <a-icon type="upload" /> upload </a-button>
    </a-upload>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    customRequest(obj) {
      let rep = {
        uid: obj.file.uid,
        name: obj.file.name,
        status: "done",
        url: window.URL.createObjectURL(obj.file),
        thumbUrl: window.URL.createObjectURL(obj.file),
      };
      this.fileList.push(rep);
      // obj.onProgress({ percent: 100 });
      // obj.onSuccess(window.URL.createObjectURL(obj.file), obj.file);
      console.log(obj.file, window.URL.createObjectURL(obj.file), "pbj");
    },
  },
};
</script>