2

几个小时以来，我一直试图让 Uppy 在我的 Vue TypeScript 项目中工作。我将 Vue2 与类组件和 Nuxt 一起使用。

我已经尝试通过 getter 提供 Uppy（因为文档是这样说的），

get uppy() {
    return Uppy<Uppy.StrictTypes>({
      restrictions: {
        allowedFileTypes: ["image/*"],
        maxNumberOfFiles: 1
      }
    }).use(ImageEditor, {
      id: "ImageEditor",
      quality: 0.8,
      cropperOptions: {
        viewMode: 1,
        aspectRatio: 1,
        background: false,
        autoCropArea: 1,
        responsive: true
      },
      actions: {
        revert: true,
        rotate: true,
        flip: true,
        zoomIn: true,
        zoomOut: true,
        cropSquare: true,
        cropWidescreen: true,
        cropWidescreenVertical: true
      }
    });

以及一个属性。

  private uppy =  Uppy<Uppy.StrictTypes>({
      restrictions: {
        allowedFileTypes: ["image/*"],
        maxNumberOfFiles: 1
      }
    }).use(ImageEditor, {
      id: "ImageEditor",
      quality: 0.8,
      cropperOptions: {
        viewMode: 1,
        aspectRatio: 1,
        background: false,
        autoCropArea: 1,
        responsive: true
      },
      actions: {
        revert: true,
        rotate: true,
        flip: true,
        zoomIn: true,
        zoomOut: true,
        cropSquare: true,
        cropWidescreen: true,
        cropWidescreenVertical: true
      }
    });

我的整个文件看起来像这样

<template>
  <div>
    <dashboard
      :uppy="uppy"
      :plugins="['ImageEditor']"
    />
  </div>
</template>

<script lang="ts">
import Uppy from "@uppy/core";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import "@uppy/image-editor/dist/style.css";
import { Dashboard } from "@uppy/vue";
import ImageEditor from "@uppy/image-editor";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    Dashboard
  }
})
export default class uppyUpload extends Vue {
  private uppy =  Uppy<Uppy.StrictTypes>({
      restrictions: {
        allowedFileTypes: ["image/*"],
        maxNumberOfFiles: 1
      }
    }).use(ImageEditor, {
      id: "ImageEditor",
      quality: 0.8,
      cropperOptions: {
        viewMode: 1,
        aspectRatio: 1,
        background: false,
        autoCropArea: 1,
        responsive: true
      },
      actions: {
        revert: true,
        rotate: true,
        flip: true,
        zoomIn: true,
        zoomOut: true,
        cropSquare: true,
        cropWidescreen: true,
        cropWidescreenVertical: true
      }
    });

  beforeDestroy(): void {
    this.uppy.close();
  }
}
</script>

编译后我已经在控制台中收到警告： WARN in ./node_modules/@uppy/vue/lib/dashboard.js "export 'h' (imported as 'Vue') was not found in 'vue'

但是，当我尝试加载页面时，我收到导出是意外令牌的错误 意外的令牌“导出”

不幸的是，我不知道我会做错什么。你们有什么想法吗？

4

0 回答 0