vue2-dropzone 与 vue3 兼容吗？

Posted 2023-05-08

【中文标题】vue2-dropzone 与 vue3 兼容吗？

【英文标题】：Is vue2-dropzone compatible with vue3?

【发布时间】：2021-07-25 19:08:36

【问题描述】：

vue2-dropzone 适用于 vue2，但不适用于 vue3。

使用以下代码

import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

return 
  dropzoneOptions: 
     autoProcessQueue: false,
         addRemoveLinks: true,
         url: this.url,
         headers: 
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         ,
     ,
     id: null,
     myDropZone: null,
     supervisorError: ''
  

我确实有以下错误

TypeError: 无法读取未定义 vue3 的属性 '_c'

【问题讨论】：

嗨，我的回答有帮助吗？

【参考方案1】：

vue3-dropzone

你追求的是vue3-dropzone。

它的工作方式与你们大多数人可能已经在 vue2 中使用的 vue2-dropzone 包非常相似。我自己是新的 vue3-dropzone 包的贡献者之一。我刚刚为那些想要一次保存多个文件的人添加了示例代码，如下所示：

保存多个文件的示例

<template>
      <div>
        <div v-bind="getRootProps()">
          <input v-bind="getInputProps()" />
          <p v-if="isDragActive">Drop the files here ...</p>
          <p v-else>Drag 'n' drop some files here, or click to select files</p>
        </div>
        <button @click="open">open</button>
      </div>
</template>
    
<script>
    import  useDropzone  from "vue3-dropzone";
    import axios from "axios";
    
    export default 
      name: "UseDropzoneDemo",
      setup() 
        const url = "your_url"; // Your url on the server side
        const saveFiles = (files) => 
          const formData = new FormData(); // pass data as a form
          for (var x = 0; x < files.length; x++) 
            // append files as array to the form, feel free to change the array name
            formData.append("images[]", files[x]);
          
    
          // post the formData to your backend where storage is processed. In the backend, you will need to loop through the array and save each file through the loop.
    
          axios
            .post(url, formData, 
              headers: 
                "Content-Type": "multipart/form-data",
              ,
            )
            .then((response) => 
              console.info(response.data);
            )
            .catch((err) => 
              console.error(err);
            );
        ;
    
        function onDrop(acceptFiles, rejectReasons) 
          saveFiles(acceptFiles); // saveFiles as callback
          console.log(rejectReasons);
        
    
        const  getRootProps, getInputProps, ...rest  = useDropzone( onDrop );
    
        return 
          getRootProps,
          getInputProps,
          ...rest,
        ;
      ,
    ;
</script>

【参考方案2】：

如本文所述：https://github.com/rowanwins/vue-dropzone/issues/578

看起来vue-dropzone 目前不支持 Vue3，我的意思是 mantainer 已经在努力管理 vue 2 并寻求帮助，所以它看起来是合法的。

也许可以看看这个 vue3 的：https://github.com/Yaxian/vue3-dropzone

---

以下是可用替代方案的列表：https://github.com/vuejs/awesome-vue#drag-and-drop

【参考方案3】：

好吧，我们将这个包用于我们的生产构建：

Vue3 库组件，用于通过图像预览进行拖放文件上传。 https://github.com/darknessnerd/drop-zone