Vueの2系でファイルアップロードを書いてあったものをVUE3というかdefineComponent+Typescriptで書き直したいと思っています。
TypeScriptに馴染みが無いので型宣言等に大変苦労しています・・
イベントの型で間違っているのかそもそも変数の型宣言の時点で間違っているのかが想像つかない状態です・・
少し長くて申し訳ないのですが現状のコードを示します
vue
1<template> 2 <div style="display:flex;width:400px;margin:0 auto;"> 3 <div> 4 <input 5 @change="selectedFile" 6 type="file" 7 name="file" 8 ref="files" 9 style="font-size:14px;" 10 > 11 </div> 12 <div> 13 <button type="button" @click="upFile">アップロード</button> 14 </div> 15 16 </div> 17</template> 18 19<script lang="ts"> 20import { defineComponent, reactive } from "vue"; 21import axios from "axios"; 22export default defineComponent({ 23 setup() { 24 const state = reactive({ 25 uploadFile: { 26 type: File, 27 value: File, 28 }, 29 filename: "", 30 }); 31 32 const selectedFile = (e: any) => { 33 console.log("selectedFile"); 34 console.log(e); 35 36 e.preventDefault(); 37 // let files = e.target.files; 38 state.uploadFile = e.target.files[0]; 39 }; 40 41 const upFile = () => { 42 console.log("upFile"); 43 const formData = new FormData(); 44 // formData.append("uploadFile", state.uploadFile.value); 45 // formData.append("uploadFile", state.uploadFile); 46 // formData.append("uploadFile", files); 47 const config = { 48 headers: { 49 "content-type": "multipart/form-data", 50 }, 51 }; 52 axios 53 .post("*****.php", formData, config) 54 .then((res) => { 55 // 省略 56 }) 57 .catch(function (error) { 58 // 省略 59 }); 60 }; 61 62 return { 63 state, 64 selectedFile, 65 upFile, 66 }; 67 }, 68}); 69</script>
以前までのdefineComponentではないVueで、ファイルを選択(change)した時点でファイルを変数に受けて、アップロードボタンをクリックしたらformdataにappendしてaxiosでPOSTするという流れで動作していました。
今回Vue3へ移行というか、このdefineComponentに移行させるタイミングでTypeScriptにしようと思いました。
提示しておりますコードではupFile内のformDataにappendする時点で型がおかしいエラーになってしまいます。
そもそもアプローチが間違っているのか、型を間違えているのかがわからない状態でして・・・
2~3日悩んでましたが他の移行はだいたい終わりましたが、後はアップロード処理か?といったところで躓いてしまいまして・・
なにかヒントをよろしくお願いいたします。
あなたの回答
tips
プレビュー