iT邦幫忙

0

問一下 Vue 使用 $("#file-manager").dxFileManager({ 這一個的問題

vue vue.js javascript
ping1000 2021-06-22 15:23:40 ‧ 1511 瀏覽

問一下 Vue 使用 $("#file-manager").dxFileManager({ 這一個的問題

目前我在專案上遇到一個困難

因為專案上有使用 dxFileManager 檔案管理

然後當使用者創立新資料夾 or 上傳檔案時 會需要抓 path 然後寫回DB

目前我的 CODE 是這樣的

<template>
  <div class="FileManagement">
    <va-inner-loading :loading="isLoading">
      <div class="row">
        <div class="flex xs12 md12" id="file-manager">
          <DxFileManager
            :file-system-provider="fileSystemProvider"
            current-path="Widescreen"
          >
            <DxPermissions
              :create="true"
              :copy="true"
              :move="true"
              :delete="true"
              :rename="true"
              :upload="true"
              :download="true"
            />
          </DxFileManager>
        </div>
      </div>
    </va-inner-loading>
  </div>
</template>
<script>
import Apis from "Apis";
import {
  DxFileManager,
  DxPermissions,
  DxItemView,
  DxDetails,
  DxColumn,
} from "devextreme-vue/file-manager";

export default {
  name: "file-management",
  components: {
    DxFileManager,
    DxPermissions,
    DxItemView,
    DxDetails,
    DxColumn,
  },
  data() {
    return {
      isLoading: false,
      fileSystemProvider: [],
      popupVisible: false,
      imageItemToDisplay: {},
    };
  },
  mounted() {
    this.initEvent();
    $(function () {
      $("#file-manager").dxFileManager({
        name: "fileManager",
        fileSystemProvider: customProvider,
        currentPath: "Documents",
        rootFolderName: "Root",
        height: 450,
        onErrorOcurred: function (e) {
          debugger;
          console.log(e);
        },
        permissions: {
          create: true,
          copy: true,
          move: true,
          delete: true,
          rename: true,
        },
        customizeDetailColumns: (columns) => {
          columns.push({
            caption: "Creator",
            dataField: "dataItem.creator",
          });
          return columns;
        },
      });
    });
  },
  methods: {
    initEvent: function () {
      this.getDataSource();
    },
    getDataSource() {
      let self = this;
      Apis.Upload.post
        .GetUploadFileCheck({
          UploadFile: [{}],
        })
        .then(function (xhr) {
          //debugger;
          self.isLoading = false;
          if (xhr.data.result[0].UploadFile) {
            let arr = xhr.data.result[0].UploadFile;
            var tree = {};
            arr.forEach((item) => {
              let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
              let current = tree;
              for (let i = 0; i < tokens.length; i++) {
                if (!current[tokens[i]]) {
                  current[tokens[i]] = {};
                }
                current = current[tokens[i]];
              }
            });
            const parseNode = function (node) {
              return Object.keys(node).map((key) => {
                if (Object.keys(node[key]).length === 0) {
                  return {
                    isDirectory: false,
                    name: key,
                  };
                }
                return {
                  isDirectory: true,
                  name: key,
                  items: parseNode(node[key]),
                };
              });
            };
            let result = parseNode(tree);
            
            let aaa = self.fileSystemProvider = [
              {
                name: "安全管理",
                isDirectory: true,
                items: result,
              },
            ];

            //debugger;
            var objectProvider =
              new DevExpress.fileManagement.ObjectFileSystemProvider({
                data: new_r,
              });
            var customProvider =
              new DevExpress.fileManagement.CustomFileSystemProvider({
                getItems: function (pathInfo) {
                  return objectProvider.getItems(pathInfo);
                },
                renameItem: function (item, name) {
                  if (item.name == "Parent1") {
                    console.log("error in custom provider");
                    throw {
                      errorId: 0,
                      fileItem: item,
                    };
                    console.log("error in custom provider");
                  } else return objectProvider.renameItem(item, name);
                },
                createDirectory: function (parentDir, name) {
                  if (parentDir.name == "Parent1") {
                    throw {
                      errorId: 0,
                      fileItem: item,
                    };
                  } else return objectProvider.createDirectory(parentDir, name);
                },
                deleteItem: function (item) {
                  console.log(item);
                  if (item.name == "Parent1") {
                    throw {
                      errorId: 0,
                      fileItem: item,
                    };
                  } else return objectProvider.deleteItems([item]);
                },
                moveItem: function (item, destinationDir) {
                  if (item.name == "Parent1") {
                    throw {
                      errorId: 0,
                      fileItem: item,
                    };
                  } else
                    return objectProvider.moveItems([item], destinationDir);
                },
                copyItem: function (item, destinationDir) {
                  if (item.name == "Parent1") {
                    throw {
                      errorId: 0,
                      fileItem: item,
                    };
                  } else
                    return objectProvider.copyItems([item], destinationDir);
                },
              });
                  },
  },
};
</script>

資料是有可以呈現 但是 console 的地方會出現
customProvider is not defined

這會是哪裡的問題?

customProvider 這一個直要怎麼回傳到 mounted 裡面的
fileSystemProvider: customProvider

登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
listennn08
iT邦高手 5 級 ‧ 2021-06-22 17:10:29

我覺得 devExtreme 的文件寫得看起來很詳細但也有時候也沒辦法找到要的資料

https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/Overview/Vue/Light/

sample code 看起來只需要提供你的資料進去其他都會幫你處理好

所以應該這樣也能動

mounted() {
  this.getDataSource();
},
methods: {
  getDataSource() {
    let self = this;
    Apis.Upload.post
      .GetUploadFileCheck({
        UploadFile: [{}],
      })
      .then(function (xhr) {
        //debugger;
        self.isLoading = false;
        if (xhr.data.result[0].UploadFile) {
          let arr = xhr.data.result[0].UploadFile;
          var tree = {};
          arr.forEach((item) => {
            let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
            let current = tree;
            for (let i = 0; i < tokens.length; i++) {
              if (!current[tokens[i]]) {
                current[tokens[i]] = {};
              }
              current = current[tokens[i]];
            }
          });
          const parseNode = function (node) {
            return Object.keys(node).map((key) => {
              if (Object.keys(node[key]).length === 0) {
                return {
                  isDirectory: false,
                  name: key,
                };
              }
              return {
                isDirectory: true,
                name: key,
                items: parseNode(node[key]),
              };
            });
          };
          let result = parseNode(tree);
            
          let aaa = self.fileSystemProvider = [
            {
              name: "安全管理",
              isDirectory: true,
              items: result,
            },
          ];
        }
      })
  }
}
看更多先前的回應...收起先前的回應...
ping1000 iT邦新手 5 級 ‧ 2021-06-22 17:15:03 檢舉

是阿~我原本也是這樣用~但是這個沒有我要的功能~ 我需要當使用者建立資料夾的時候, 我就必須要抓到使用者當時是在哪個目錄底下新增資料夾的路徑 或者 上傳檔案的路徑 然後寫回 DB~ 而且當使用者要下載檔案時...還必須抓到路徑給使用者下載

listennn08 iT邦高手 5 級 ‧ 2021-06-22 17:30:50 檢舉

ping1000
你可以參考一下他使用的RemoteFileSystemProvider 或是這個
https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/UICustomization/Vue/Light/

ping1000 iT邦新手 5 級 ‧ 2021-06-24 17:26:50 檢舉

我看到一個新的方法 但是我不知道該如何整合到我的 code 裡面 方便請教一下嗎?

<script>
import { DxFileManager, DxPermissions } from "devextreme-vue/file-manager";
import { fileItems } from "./data.js";
import CustomFileSystemProvider from "devextreme/file_management/custom_provider";
import ObjectFileSystemProvider from "devextreme/file_management/object_provider";
const objectProvider = new ObjectFileSystemProvider({
  data: fileItems,
});
export default {
  components: {
    DxFileManager,
    DxPermissions,
  },
  data() {
    return {
      fileSystemProvider: new CustomFileSystemProvider({
        getItems,
        createDirectory,
        uploadFileChunk,
      }),
    };
  },
};

function getItems(parentDirectory) {
  return objectProvider.getItems(parentDirectory);
}

function createDirectory(parentDirectory, name) {
  alert(parentDirectory.path);
  //get parent directory when creating a folder here
  return objectProvider.createDirectory(parentDirectory, name);
}

function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
  alert(destinationDirectory.path);
  // get a file destination directory when uploading here
  return objectProvider.uploadFileChunk(
    fileData,
    uploadInfo,
    destinationDirectory
  );
}
</script>

這樣的話 我該如何把一段語法

import ObjectFileSystemProvider from "devextreme/file_management/object_provider";
const objectProvider = new ObjectFileSystemProvider({
  data: fileItems,
});

套在我的程式上? 因為我的資料來源是在這裡 run 的

const parseNode = function (node) {
              return Object.keys(node).map((key) => {
                if (Object.keys(node[key]).length === 0) {
                  return {
                    isDirectory: false,
                    name: key,
                  };
                }
                return {
                  isDirectory: true,
                  name: key,
                  items: parseNode(node[key]),
                };
              });
            };
            let result = parseNode(tree);
self.fileSystemProvider = [
              {
                name: "安全管理",
                isDirectory: true,
                items: result,
              },
            ];
listennn08 iT邦高手 5 級 ‧ 2021-06-24 20:09:21 檢舉

ping1000
像這樣吧，其他你要做的處理就一樣
https://codesandbox.io/s/trusting-kirch-9g53z?file=/src/components/HelloWorld.vue

ping1000 iT邦新手 5 級 ‧ 2021-06-25 15:48:31 檢舉

我把您的 code 改成這樣 同時放到 methods 裡面, 會出現 api is not undefined

const api = parseNode(tree);
const objectProvider = new ObjectFileSystemProvider({
  data: [
    {
      name: "安全管理",
      isDirectory: true,
      items: [],
    },
  ],
});

data() {
    return {
      isLoading: false,
      fileSystemProvider: [],
      popupVisible: false,
      imageItemToDisplay: {},
    };
  },

因為我的這一段都是再 methods 裡面

let arr = xhr.data.result[0].UploadFile;
            var tree = {};
            arr.forEach((item) => {
              let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
              let current = tree;
              for (let i = 0; i < tokens.length; i++) {
                if (!current[tokens[i]]) {
                  current[tokens[i]] = {};
                }
                current = current[tokens[i]];
              }
            });
            const parseNode = function (node) {
              return Object.keys(node).map((key) => {
                if (Object.keys(node[key]).length === 0) {
                  return {
                    isDirectory: false,
                    name: key,
                  };
                }
                return {
                  isDirectory: true,
                  name: key,
                  items: parseNode(node[key]),
                };
              });
            };
            let result = parseNode(tree);
            self.fileSystemProvider = [
              {
                name: "安全管理",
                isDirectory: true,
                items: result,
              },
            ];
listennn08 iT邦高手 5 級 ‧ 2021-06-25 16:01:42 檢舉

ping1000
你要改成你的啊， api 只是我放我的假資料
你怎麼取得資料就怎麼改

ping1000 iT邦新手 5 級 ‧ 2021-06-25 16:31:52 檢舉

我改過了 ~我把這兩個移到 methods 裡面 會有錯誤

'objectProvider' is declared but its value is never read.

const api = "https://mocki.io/v1/74d78e68-fafc-4f8b-b2ab-d5be3d5b0050";
const objectProvider = new ObjectFileSystemProvider({
  data: [
    {
      name: "安全管理",
      isDirectory: true,
      items: [],
    },
  ],
});
listennn08 iT邦高手 5 級 ‧ 2021-06-25 16:58:23 檢舉

ping1000
我不知道為什麼要把那兩個移進去，
這是你的 API 用你的 API 就好，
也不用把東西搬進去，只要知道怎樣去修改他的資料就好了。

 getDataSource() {
    let self = this;
    Apis.Upload.post
      .GetUploadFileCheck({
        UploadFile: [{}],
      })
      .then(function (xhr) {
        //debugger;
        self.isLoading = false;
        if (xhr.data.result[0].UploadFile) {
          let arr = xhr.data.result[0].UploadFile;
          var tree = {};
          arr.forEach((item) => {
            let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
            let current = tree;
            for (let i = 0; i < tokens.length; i++) {
              if (!current[tokens[i]]) {
                current[tokens[i]] = {};
              }
              current = current[tokens[i]];
            }
          });
          const parseNode = function (node) {
            return Object.keys(node).map((key) => {
              if (Object.keys(node[key]).length === 0) {
                return {
                  isDirectory: false,
                  name: key,
                };
              }
              return {
                isDirectory: true,
                name: key,
                items: parseNode(node[key]),
              };
            });
          };
          // 改成這樣 -------------------------------------
          objectProvider._data[0].items = parseNode(tree);
          // ---------------------------------------------
        }
      })
  }
ping1000 iT邦新手 5 級 ‧ 2021-06-25 17:37:38 檢舉

感謝 ^^
最後一個問題~ 有辦法可以抓取到當使用者建立目錄的名稱嗎?

listennn08 iT邦高手 5 級 ‧ 2021-06-26 20:13:57 檢舉

ping1000
建立一個 function 取代這個
https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxFileManager/File_System_Providers/Custom/Methods/#createDirectory

ping1000 iT邦新手 5 級 ‧ 2021-06-28 11:59:47 檢舉

那個我實現了
假如我建立一個新的目錄
要如何再 Server 端 也可以實現建立一個目錄?

function createDirectory(parentDirectory, name) {
  alert(name);
  alert(parentDirectory.path);
  console.log(name);
  //get parent directory when creating a folder here
  return objectProvider.createDirectory(parentDirectory, name);
}

這一段可以顯示在哪個目錄底下建立 並且抓到建立的名稱
但是我不知道如何再 Server 端也可以新增一個資料夾

listennn08 iT邦高手 5 級 ‧ 2021-06-28 12:29:18 檢舉

這個請使用 api 跟後端介接

ping1000 iT邦新手 5 級 ‧ 2021-06-28 15:58:58 檢舉

我是有串 api 了~ 所以我要再 api 那邊下指令去創資料夾?

listennn08 iT邦高手 5 級 ‧ 2021-06-28 18:46:46 檢舉

可以這樣做，也可以用資料庫存虛擬路徑，這種方式實體路徑存哪都可以，只要抓得到就行

ping1000 iT邦新手 5 級 ‧ 2021-06-29 11:35:49 檢舉

若是要下載檔案的話 我再 function 裡面該打哪個語法?

原本想說我先給固定的路徑 http://192.168.67.164/html/sms_files/aaa/bbb/ccc.xls

function downloadItems(items) {
items.downloadItems = "http://192.168.67.164/html/sms_files/aaa/bbb/ccc.xls";
  return objectProvider.downloadItems;
}

但是沒反應 不會下載檔案

listennn08 iT邦高手 5 級 ‧ 2021-06-29 14:39:29 檢舉

沒反應先去確認有沒有呼叫 function 吧
更何況你的語法是哪裡來的？
要用固定路徑就不需要用他的語法
請先去仔細看過文件或是範例。

function downloadItems(items) {
  objectProvider.downloadFile(items[0].path);
}
ping1000 iT邦新手 5 級 ‧ 2021-06-29 15:23:01 檢舉

妳那個我有嘗試過~ 也是不能 所以我才換別的方法QQ
是出現 objectProvider.downloadFile is not a function

listennn08 iT邦高手 5 級 ‧ 2021-06-29 15:41:38 檢舉

哦哦，因為我剛剛看的是 azure 的，ObjectProvider 的 method 是 objectProvider.downloadItems(itme[0].path);
這文件也有寫吧

ping1000 iT邦新手 5 級 ‧ 2021-07-01 09:08:52 檢舉

那個我也有嘗試過了~ 可能我這還需要再研究一下
不知道為何 點下去都沒反應
另外問一個問題 因為我當初忘了把 ID 給丟進去了
所以在這邊 run 的時候 我要怎麼把 ID 給放進去

let arr = xhr.data.result[0].smsL_UploadFile;
            var tree = {};
            arr.forEach((item) => {
              let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
              let current = tree;
              for (let i = 0; i < tokens.length; i++) {
                if (!current[tokens[i]]) {
                  current[tokens[i]] = {};
                }
                current = current[tokens[i]];
              }
            });
            //debugger;
            const parseNode = function (node) {
              return Object.keys(node).map((key) => {
                if (Object.keys(node[key]).length === 0) {
                  return {
                    isDirectory: false,
                    name: key,
                    fid: ??,
                  };
                }
                return {
                  isDirectory: true,
                  name: key,
                  fid: ??,
                  items: parseNode(node[key]),
                };
              });
            };

那個 key 只能顯示我 json 上面的 name 欄位
然後我 json 上有新增一個 fid

類似這樣

{
          "name": "Projects",
          "fid": "1233322",
          "isDirectory": true,
          "items": [{
              "name": "About.rtf",
              "fid": "1233322",
              "isDirectory": false
            },
            {
              "name": "Passwords.rtf",
              "fid": "1233322",
              "isDirectory": false
            }
          ]
        }
listennn08 iT邦高手 5 級 ‧ 2021-07-01 11:09:35 檢舉

你這樣問我實在不知道你要怎樣把資料塞進去欸
我連後端給你的資料長什麼樣子都不知道
更何況這些問題已經不在你原本提問的範圍內了

ping1000 iT邦新手 5 級 ‧ 2021-07-01 13:47:19 檢舉

之前 json 是這樣的格式
只是現在想要把 fid 的值給塞進去~
從資料庫丟出來的 json 有 fid 的值~
然後我會把 json 重新解析編寫 去符合 filemanager 所需要的格式
現在想讓 name 底下 可以多一個 fid 的值~
因為我發現我若不塞 fid 的值 我會無法去做單筆資料的 update 動作

舊的 json

[
    {
        "name": "Officer",   //part1
        "isDirectory": true,
        "items": [
            {
                "name": "EventReport",  //part2
                "isDirectory": true,
                "items": [
                    {
                        "name": "SelfReport",  //part3
                        "isDirectory": true,
                        "items": [
                            {
                                "name": "2020-110-04-02",  //part4
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "RCBS.pdf",  // name
                                        "isDirectory": false
                                    }
                                ]
                            },
                            {
                                "name": "2020-110-04-10",  //part4 
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "1100_b.pdf",  //name
                                        "isDirectory": false
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "name": "SecurityMeeting",  // part2
                "isDirectory": true,
                "items": [
                    {
                        "name": "SecurityWorkMeeting",  //part3
                        "isDirectory": true,
                        "items": [
                            {
                                "name": "2021-05-SecurityWorkMeeting",  //part4
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "Officer_Report.docx",  //name
                                        "isDirectory": false
                                    },
                                    {
                                        "name": "16200.jpg",  //name
                                        "isDirectory": false
                                    },
                                    {
                                        "name": "2021-05-18_2342.png",  //name
                                        "isDirectory": false
                                    }
                                ]
                            },      
                        ]
                    }
                ]
            }
        ]
    },    
]

想要把 fid 的值塞進去變成這樣

[
    {
        "name": "Officer",   //part1
        "fid": "123",
        "isDirectory": true,
        "items": [
            {
                "name": "EventReport",  //part2
                "fid": "123",
                "isDirectory": true,
                "items": [
                    {
                        "name": "SelfReport",  //part3
                        "fid": "123",
                        "isDirectory": true,
                        "items": [
                            {
                                "name": "2020-110-04-02",  //part4
                                "fid": "123",
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "RCBS.pdf",  // name
                                        "isDirectory": false
                                    }
                                ]
                            },
                            {
                                "name": "2020-110-04-10",  //part4 
                                "fid": "123",
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "1100_b.pdf",  //name
                                        "fid": "123",
                                        "isDirectory": false
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "name": "SecurityMeeting",  // part2
                "fid": "456",
                "isDirectory": true,
                "items": [
                    {
                        "name": "SecurityWorkMeeting",  //part3
                        "fid": "456",
                        "isDirectory": true,
                        "items": [
                            {
                                "name": "2021-05-SecurityWorkMeeting",  //part4
                                "fid": "456",
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "Officer_Report.docx",  //name
                                        "fid": "456",
                                        "isDirectory": false
                                    },
                                    {
                                        "name": "16200.jpg",  //name
                                        "fid": "456",
                                        "isDirectory": false
                                    },
                                    {
                                        "name": "2021-05-18_2342.png",  //name
                                        "fid": "456",
                                        "isDirectory": false
                                    }
                                ]
                            },      
                        ]
                    }
                ]
            }
        ]
    },    
]
listennn08 iT邦高手 5 級 ‧ 2021-07-02 09:16:45 檢舉

不知道你的原本的資料長怎樣，因為你給我的是你期望的資料，我只能用猜的

let arr = xhr.data.result[0].smsL_UploadFile;
var tree = {};
arr.forEach((item) => {
  let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
  let current = tree;
  for (let i = 0; i < tokens.length; i++) {
    if (!current[tokens[i]]) {
      current[tokens[i]] = { fid: item.fid };
    }
    current = current[tokens[i]];
  }
});

const parseNode = function (node) {
  return Object.keys(node).map((key) => {
    if (Object.keys(node[key]).length === 0) {
      return {
        isDirectory: false,
        name: key,
        fid: node[key].fid,
      };
    }
    return {
      isDirectory: true,
      name: key,
      fid: node[key].fid,
      items: parseNode(node[key]),
    };
  });
};
ping1000 iT邦新手 5 級 ‧ 2021-07-02 10:33:22 檢舉

測試了一下 發現會有問題
跟插件上有衝突

這是正常的
https://imgur.com/j7UqEzp

"安全會議": {
        "安全工作會議": {
            "5月安全工作會議": {
                "會前資料": {
                    "問題報告單.docx": {},
                    "2021-05-18_092810.png": {}
                },
                "會後資料": {
                    "1620021359034.jpg": {}
                }
            }
        }
    }

這是不正常有衝突的
https://imgur.com/gOvOOaK

"安全會議": {
        "fid": "20210504001",
        "安全工作會議": {
            "fid": "20210504001",
            "5月安全工作會議": {
                "fid": "20210504001",
                "會前資料": {
                    "fid": "20210504001",
                    "問題報告單.docx": {
                        "fid": "20210504001"
                    },
                    "2021-05-18_092810.png": {
                        "fid": "20210518005"
                    }
                },
                "會後資料": {
                    "fid": "20210504001",
                    "1620021359034.jpg": {
                        "fid": "20210504001"
                    }
                }
            }
        }
    }

這一個是我之前用來測試的
https://codesandbox.io/s/hierarchical-js-structure-devextreme-file-manager-forked-o2opu?file=/data.js

原本想說再
'name': 'Projects',
'isDirectory': true,
這兩個下面再新增一個 fid 的值
但是卻似乎有問題

SQL 傳回的 json 原碼類似會是這樣

https://imgur.com/PnByPDd

d_path: "/var/www/html/sms/安全辦公室/每日簡報Briefing/Briefing/1070_briefing.pdf"
fid: "20210201762"
name: "1070712_briefing.pdf"
part: "2"
path: "安全辦公室/每日簡報Briefing/Briefing/1070_briefing.pdf"

會透過第一段是重新編寫成符合 Filemanager 的格式

listennn08 iT邦高手 5 級 ‧ 2021-07-02 12:01:14 檢舉

我看不到不正常的圖片

照你的說法，我去看了一下 provider 提供的格式，如果沒辦法另外加格式，可能要另外產生一個有 fid 的 object 用 path + name 去當 key 在 update 的時候去取得這個物件裡的 fid，如果你是使用 fid 去更新的話

ping1000 iT邦新手 5 級 ‧ 2021-07-02 17:24:15 檢舉

更新圖片了~也更新用 code 方式顯示
你說的那個 要另外產生 fid 的 object 是指?

可是我記得 Filemanager 需要的格式會是這樣

{
  'name': 'Documents',
  'isDirectory': true,
  'items': [{
    'name': 'Projects',
    'isDirectory': true,
    'items': [{
      'name': 'About.rtf',
      'isDirectory': false,
      'size': 1024
    }, {
      'name': 'Passwords.rtf',
      'isDirectory': false,
      'size': 2048
    }]
  }, {
    'name': 'About.xml',
    'isDirectory': false,
    'size': 1024
  }, {
    'name': 'Managers.rtf',
    'isDirectory': false,
    'size': 2048
  }, {
    'name': 'ToDo.txt',
    'isDirectory': false,
    'size': 3072
  }],
}, {
  'name': 'Images',
  'isDirectory': true,
  'items': [{
    'name': 'logo.png',
    'isDirectory': false,
    'size': 20480
  }, {
    'name': 'banner.gif',
    'isDirectory': false,
    'size': 10240
  }]
}, {
  'name': 'System',
  'isDirectory': true,
  'items': [{
    'name': 'Employees.txt',
    'isDirectory': false,
    'size': 3072
  }, {
    'name': 'PasswordList.txt',
    'isDirectory': false,
    'size': 5120
  }]
}, {
  'name': 'Description.rtf',
  'isDirectory': false,
  'size': 1024
}, {
  'name': 'Description.txt',
  'isDirectory': false,
  'size': 2048
}

所以我才會在第二段用這個方式

const parseNode = function (node) {
              //debugger;
              return Object.keys(node).map((key) => {
                //debugger;
                if (Object.keys(node[key]).length === 0) {
                  return {
                    isDirectory: false,
                    name: key,
                  };
                }
                return {
                  isDirectory: true,
                  name: key,
                  items: parseNode(node[key]),
                };
              });
            };

可是無法再這裡直接抓到 fid 的值

listennn08 iT邦高手 5 級 ‧ 2021-07-03 13:13:03 檢舉

parseNode 可以改成這樣

const parseNode = function (node) {
  return Object.keys(node).map((key) => {
    const { fid } = node[key];
    delete node[key].fid;
    if (Object.keys(node[key]).length === 0) {
      return {
        isDirectory: false,
        name: key,
        fid,
      };
    }

    return {
      isDirectory: true,
      name: key,
      fid,
      items: parseNode(node[key]),
    };
  });
};

那我看了一下我之前的範例上面有包含 id 所以我覺得有不在他上面的 properties 是可以的

ping1000 iT邦新手 5 級 ‧ 2021-07-05 09:53:58 檢舉

恩~抓不到 fid, 會出現 fid: undefined

listennn08 iT邦高手 5 級 ‧ 2021-07-05 13:33:03 檢舉

不知道你說哪裡抓不到 fid ，要嘛你給我的程式碼不一致或是你的 server 回傳的格式不是你說的格式
codepen

ping1000 iT邦新手 5 級 ‧ 2021-07-05 14:38:05 檢舉

有了~ 怪怪 那我早上複製會出現未定義= =

fid 我抓出來了

用 console.log(item.dataItem.dataItem.fid);

另外 我有一個問題 就是 當我在這個 function 的時候

function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {

}

我該如何可以使用這一個 function? 或者該怎麼修改然後放進上面那個 function 使用?

apiUploadFile: function (item) {
      let self = this;
      if (item.name !== "" && item.base64 !== "") {
        //server
        let param = {
          FileName: item.path + item.name,
          Base64FileData: item.base64,
        };
        //上傳到server
        (function (item) {
          Apis.Upload.post
            .UploadFile(param)
            .then(function (xhr) {
              if (xhr.data.result[0] === "OK") {
                console.log("上傳成功");
              }
            })
            .catch(function (error) {});
        })(item);
      }
    },

我這一個改超久...還是不知道該如何修改 才可以放到 uploadFileChunk 那個 function 裡面

listennn08 iT邦高手 5 級 ‧ 2021-07-06 09:19:06 檢舉

他都幫你弄好了，
fileData 可以取得名稱跟資料
destinationDirectory 可以取得路徑位置
基本上這兩個就能達成你要做的東西了

ping1000 iT邦新手 5 級 ‧ 2021-07-06 09:32:25 檢舉

我現在是卡在檔案上傳不了 不能上傳到 Server
一直都會出現

Access to XMLHttpRequest at 'http://192.168.1.120/files' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

<template>
  <div class="FileManagement" id="file-manager">
    <va-inner-loading :loading="isLoading">
      <div class="row">
        <div class="flex xs12 md12">
          <DxFileManager
            ref="fileManager"
            :file-system-provider="fileSystemProvider"
            current-path="Widescreen"
          >
            <DxPermissions
              :create="true"
              :copy="false"
              :move="false"
              :delete="false"
              :rename="false"
              :upload="true"
              :download="true"
            />
          </DxFileManager>
        </div>
      </div>
    </va-inner-loading>
  </div>
</template>

function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
  let formData = new FormData();
  formData.append("file", fileData);
  let config = {
  headers: {
  'Content-Type': 'multipart/form-data'
  }
  }
  axios
    .post("http://192.168.1.120/files", formData, config).then(function () {
      console.log("SUCCESS!!");
    })
    .catch(function () {
      console.log("FAILURE!!");
    });

  if (fileData.name !== "" && fileData.base64 !== "") {
    //server
    let param = {};
    if (window.location.origin === "http://localhost:5680") {
      param = {
        FileName: "D:\\Files\\" + fileData.name,
        Base64FileData: fileData.base64,
      };
    } else {
      param = {
        FileName: fileData.path + fileData.name,
        Base64FileData: fileData.base64,
      };
    }
}

爬文說是跨網域的問題 但是其他頁面用 form 上傳的話是正常
但是用這個插件上傳就會有問題
畫面上有上傳成功與顯示 但是在 Server 沒有
可能是原插件會有自己的暫存區吧? 所以會顯示

listennn08 iT邦高手 5 級 ‧ 2021-07-06 12:01:28 檢舉

其他頁面上傳正常，不代表這頁也能上傳正常啊
CORS 問題要後端來解，不知道後端設置是怎樣所以我沒辦法回答你
vue 最多只能用 proxy 來做代理

ping1000 iT邦新手 5 級 ‧ 2021-07-06 15:15:11 檢舉

我是在 vue.config.js 有這樣設定

devServer: {
      port: 5670,
      https: false,
      proxy: 'http://localhost:5670/'
    },

但還是一樣

listennn08 iT邦高手 5 級 ‧ 2021-07-06 16:36:12 檢舉

你的 port 到底在 5670 還是 8080 ?

ping1000 iT邦新手 5 級 ‧ 2021-07-08 10:29:44 檢舉

我換到 測試機上面執行了
因為不能跨網域 所以我換去測試機上執行 沒有 port 的問題
目前我是這樣寫的

function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
let new_fileData = fileData;
  let formData = new FormData();
  formData.append("file", new_fileData);
  axios
    .post("/sms_files/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then(function (data) {
      console.log("OK!!");
    })
    .catch(function () {
      console.log("FAILURE!!");
    });
}

我可以透過網址列開啟 http://192.168.1.120/sms_files/upload/
那所 post 的路徑是這樣的嗎? => /sms_files/upload
可是我這樣設定的話 會出現 net::ERR_CONNECTION_RESET

然後 Server 上的資料夾結構是
/var/www/html/sms_files/upload

我兩種方法都試過了 可以都是一樣 上傳不了
都會出現 net::ERR_CONNECTION_RESET

listennn08 iT邦高手 5 級 ‧ 2021-07-08 18:26:38 檢舉

看一下你 server 的 log 啊，如果有 log 代表有 call 到後端

ping1000 iT邦新手 5 級 ‧ 2021-07-12 10:52:36 檢舉

那個在我現在這個程式~ 有甚麼方法可以 call 下面那個 function 嗎? 因為似乎要 call Global.vue 裡面的這個 function 才可以

必須 call onUploadFile: function (){}

onUploadFile: function (
      list,
      Root,
      URL,
      caseID,
      InsertUserID,
      InsertProgID
    ) {
      let self = this;
      //寫入smsL_UploadFile
      let pFileMain = {
        smsL_UploadFile: [
          {
            uplf_FileCaseID: caseID,
            uplf_FileRootPath: Root,
            uplf_Status: "Op",
            uplf_Description: "",
            uplf_Remark: "",
            uplf_InsertUserID: InsertUserID,
            uplf_InsertProgID: InsertProgID,
          },
        ],
      };
      SmsApis.Upload.post
        .EditUploadFile(pFileMain)
        .then(function (xhr) {
          if (xhr.data.result[0].Result === "OK") {
            list.forEach((item, index) => {
              if (item.name !== "") {
                list[index].path = URL;
                list[index].fileCaseID = caseID;
                list[index].InsertUserID = InsertUserID;
                list[index].InsertProgID = InsertProgID;
                list[index].base64 = "";
                var f = list[index];
                var reader = new FileReader();
                reader.onload = (function (theFile) {
                  return function (e) {
                    var binaryData = e.target.result;
                    var base64String = window.btoa(binaryData);
                    theFile.base64 = base64String;
                    self.apiUploadFile(theFile);
                  };
                })(f);
                reader.readAsBinaryString(f);
              }
            });
          }
        })
        .catch(function (error) {});
    },
    apiUploadFile: function (item) {
      let self = this;
      if (item.name !== "" && item.base64 !== "") {
        //server
        let param = {};
        if (window.location.origin === "http://localhost:5680") {
          param = {
            FileName: "D:\\sms_Files\\" + item.name,
            Base64FileData: item.base64,
          };
        } else {
          param = {
            FileName: item.path + item.name,
            Base64FileData: item.base64,
          };
        }
        //上傳到server
        (function (item) {
          SmsApis.Upload.post
            .UploadFile(param)
            .then(function (xhr) {
              if (xhr.data.result[0] === "OK") {
                //寫入smsL_UploadFileDetail
                let pFile = {
                  smsL_UploadFileDetail: [
                    {
                      upld_FileCaseID: item.fileCaseID,
                      upld_FileName: item.name,
                      upld_FilePath: item.path + item.name,
                      upld_FileSize: item.size,
                      upld_FileDesc: "",
                      upld_Status: "Op",
                      upld_Description: "",
                      upld_Remark: "",
                      upld_InsertUserID: item.InsertUserID,
                      upld_InsertProgID: item.InsertProgID,
                    },
                  ],
                };
                SmsApis.Upload.post
                  .EditUploadFileDetail(pFile)
                  .then(function (xhr) {
                    if (xhr.data.result[0] === "OK") {
                    }
                  })
                  .catch(function (error) {});
              }
            })
            .catch(function (error) {});
        })(item);
      }
    },
登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙