問一下 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
我覺得 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,
},
];
}
})
}
}
是阿~我原本也是這樣用~但是這個沒有我要的功能~ 我需要當使用者建立資料夾的時候, 我就必須要抓到使用者當時是在哪個目錄底下新增資料夾的路徑 或者 上傳檔案的路徑 然後寫回 DB~ 而且當使用者要下載檔案時...還必須抓到路徑給使用者下載
ping1000
你可以參考一下他使用的RemoteFileSystemProvider
或是這個
https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/UICustomization/Vue/Light/
我看到一個新的方法 但是我不知道該如何整合到我的 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,
},
];
我把您的 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,
},
];
ping1000
你要改成你的啊, api 只是我放我的假資料
你怎麼取得資料就怎麼改
我改過了 ~我把這兩個移到 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: [],
},
],
});
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);
// ---------------------------------------------
}
})
}
感謝 ^^
最後一個問題~ 有辦法可以抓取到當使用者建立目錄的名稱嗎?
那個我實現了
假如我建立一個新的目錄
要如何再 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 端也可以新增一個資料夾
這個請使用 api 跟後端介接
我是有串 api 了~ 所以我要再 api 那邊下指令去創資料夾?
可以這樣做,也可以用資料庫存虛擬路徑,這種方式實體路徑存哪都可以,只要抓得到就行
若是要下載檔案的話 我再 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;
}
但是沒反應 不會下載檔案
沒反應先去確認有沒有呼叫 function 吧
更何況你的語法是哪裡來的?
要用固定路徑就不需要用他的語法
請先去仔細看過文件或是範例。
function downloadItems(items) {
objectProvider.downloadFile(items[0].path);
}
妳那個我有嘗試過~ 也是不能 所以我才換別的方法QQ
是出現 objectProvider.downloadFile is not a function
哦哦,因為我剛剛看的是 azure 的,ObjectProvider 的 method 是 objectProvider.downloadItems(itme[0].path);
這文件也有寫吧
那個我也有嘗試過了~ 可能我這還需要再研究一下
不知道為何 點下去都沒反應
另外問一個問題 因為我當初忘了把 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
}
]
}
你這樣問我實在不知道你要怎樣把資料塞進去欸
我連後端給你的資料長什麼樣子都不知道
更何況這些問題已經不在你原本提問的範圍內了
之前 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
}
]
},
]
}
]
}
]
},
]
不知道你的原本的資料長怎樣,因為你給我的是你期望的資料,我只能用猜的
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]),
};
});
};
測試了一下 發現會有問題
跟插件上有衝突
這是正常的
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 原碼類似會是這樣
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 的格式
我看不到不正常的圖片
照你的說法,我去看了一下 provider 提供的格式,如果沒辦法另外加格式,可能要另外產生一個有 fid 的 object 用 path + name 去當 key 在 update 的時候去取得這個物件裡的 fid,如果你是使用 fid 去更新的話
更新圖片了~也更新用 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 的值
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 是可以的
恩~抓不到 fid, 會出現 fid: undefined
不知道你說哪裡抓不到 fid ,要嘛你給我的程式碼不一致或是你的 server 回傳的格式不是你說的格式
codepen
有了~ 怪怪 那我早上複製會出現未定義= =
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 裡面
他都幫你弄好了,
fileData 可以取得名稱跟資料
destinationDirectory 可以取得路徑位置
基本上這兩個就能達成你要做的東西了
我現在是卡在檔案上傳不了 不能上傳到 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 沒有
可能是原插件會有自己的暫存區吧? 所以會顯示
其他頁面上傳正常,不代表這頁也能上傳正常啊
CORS 問題要後端來解,不知道後端設置是怎樣所以我沒辦法回答你
vue 最多只能用 proxy 來做代理
我是在 vue.config.js 有這樣設定
devServer: {
port: 5670,
https: false,
proxy: 'http://localhost:5670/'
},
但還是一樣
你的 port 到底在 5670 還是 8080 ?
我換到 測試機上面執行了
因為不能跨網域 所以我換去測試機上執行 沒有 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
看一下你 server 的 log 啊,如果有 log 代表有 call 到後端
那個在我現在這個程式~ 有甚麼方法可以 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);
}
},