vue.js - 加载时未预览的文件

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.loadload回调需要一个文件对象/blob。

例如：

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