How can I upload a file to the server using Vue.js in the Filemanager plugin?
I have tried multiple methods and the console log shows that the upload was successful, but I am not able to see any files on the server. Does anyone know what could be wrong?
<template>
<div class="FileManagement" id="file-manager" name="file-manager">
<va-inner-loading :loading="isLoading">
<div class="row">
<div class="flex xs12 md12">
<DxFileManager
ref="fileManager"
name="file"
:file-system-provider="fileSystemProvider"
current-path="Widescreen"
>
<DxPermissions
:create="true"
:copy="false"
:move="false"
:delete="true"
:rename="false"
:upload="true"
:download="true"
/>
</DxFileManager>
</div>
</div>
</va-inner-loading>
</div>
</template>
data() {
return {
isLoading: false,
popupVisible: false,
imageItemToDisplay: {},
result: [],
fileSystemProvider: new CustomFileSystemProvider({
getItems,
createDirectory,
uploadFileChunk,
onCurrentDirectoryChanged,
downloadItems,
renameItem,
deleteItem,
}),
};
},
mounted() {
this.initEvent();
},
methods: {
}
function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
let self = this;
let formData = new FormData();
formData.append("name", fileData.name);
formData.append("file", fileData);
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
axios.post("/files/upload", formData, config).then(function (response) {
if (response.status === 200) {
console.log(response.data);
}
});
}
In my Global.vue file, I have a function. How can I call this function in my FileManager.vue file outside of the methods() section?
Global.vue
onUploadFile: function (
//code
)
FileManager.vue
mounted() {},
methods: {},
function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
// how can call global onUploadFile: function ???
}
General
Request URL: Request Method: GET Status Code: 200 OK Remote Address: 192.168.1.120:80 Referrer Policy: strict-origin-when-cross-origin
Or should I use JavaScript methods to upload the file?
====================================================================
To RuNpiXelruN, I followed your suggestions to modify my code, and it showed as successful, but the server still did not receive the file.
General
Request URL: Request Method: POST Status Code: 301 Moved Permanently Remote Address: 192.168.67.164:80 Referrer Policy: strict-origin-when-cross-origin