<template>
<div class="home">
<h1>BPMN Lint Analyzer</h1>
<!-- Get File from DropZone -->
<DropZone @drop.prevent="drop" @change="selectedFile"/>
<span class="file-info">File:{{dropzoneFile.name}}</span>
<button @click="sendFile" >Upload File</button>
<!-- Display Response Data (Not Working)-->
<div v-if="showResponseData">
<p>Testing: {{responseData}}</p>
</div>
</div>
</template>
<script>
import DropZone from '@/components/DropZone.vue'
import {ref} from "vue"
import axios from 'axios'
export default {
name: 'HomeView',
components: {
DropZone
},
setup(){
let dropzoneFile = ref("")
//Define Response variable and visibility toggle
var responseData=''
// var showResponseData = false
//Methods
const drop = (e) => {
dropzoneFile.value = e.dataTransfer.files[0]
}
const selectedFile = () => {
dropzoneFile.value = document.querySelector('.dropzoneFile').files[0]
}
//API Call
const sendFile = () => {
let formData = new FormData()
formData.append('file', dropzoneFile.value)
axios.post('http://localhost:3000/fileupload', formData,{
headers: {
'Content-Type':'multipart/form-data'
}
}).catch(error => {
console.log(error)
}).then(response => {
responseData = response.data
console.log(responseData);
})
// showResponseData=true
}
return{dropzoneFile, drop, selectedFile, sendFile}
}
}
</script>
我正在嘗試將來自 的回應傳遞給sendFile存盤在responseData模板中的回應，以將其顯示在 div 中。我不確定是否需要生命周期掛鉤。
電流輸出：
我玩過切換，我試圖將所有東西都轉換為選項 API。嘗試添加日志，但我仍在努力理解我在尋找什么。
不幸的是，即使應用程式本身非常簡單，在這種情況下我仍然堅持使用 Composition API。我正在努力從檔案中學到很多東西，所以我希望在這里找到解決方案。謝謝！
uj5u.com熱心網友回復：
你需要做出responseData反應，所以嘗試匯入ref或reactive從vue：
import {ref} from 'vue'
然后將您的變數創建為反應式：
const responseData = ref(null)
將資料設定為您的變數：
responseData.value = response.data
在模板檢查資料中：
<div v-if="responseData">
<p>Testing: {{responseData}}</p>
</div>
最后從 setup 函式中回傳它（如果你想在模板中使用它）：
return{dropzoneFile, drop, selectedFile, sendFile, responseData}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/532318.html
標籤：Vue.js
上一篇：在c中將結構寫入檔案