文件未在加载时预览

Question

我有一个简单的Vue-Filepond模板：

    <template>
      <div>
        <form class="form-inline">
          <file-pond
            ref="pond"
            name="image[data]"
            allow-multiple=false
            class="less-width"
            max-files="1"
            :accepted-file-types="mimes"
            :label-idle="labelIdle"
            :server="server"
            :files.sync="files"
            @init="init" />
        </form>
      </div>
    </template>

这是一个子组件，所以我将其推送到@init上的数组。

    methods: {
      init: function() {
        this.attachment_type = this.file.attachment_type
        this.files.push(this.file)

        this.axiosInstance = axios.create({
          baseURL: `/api/${this.id}/images`
        })
      },
      load: function (source, load, error, progress, abort, headers) {
        this.axiosInstance.get(`/${source.id}`, {
          onDownloadProgress: (e) => {
            progress(e.lengthComputable, e.loaded, e.total)
          },
        })
        .then(response => {
          progress(true, 0, 1024) // signal 100%
          load(response.data.image)
        })
        .catch(error => {
          console.log(error)
        })
      }

一切正常，没有错误，但没有任何预览：

数据在那里：

我需要怎么做才能确保图像在加载时被预览？

Answer 1

server.load load回调需要一个文件对象/ blob。

例如：

server.load = (fileSrc, load) => {
    fetch(fileSrc)
        .then(res.blob())
        .then(load)
}