vue2-dropzone 与 vue3 兼容吗？

如何解决vue2-dropzone 与 vue3 兼容吗？

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'

解决方法

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

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

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

---

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

,

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,...rest,};
      },};
</script>