質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

2054閲覧

vueのファイルアップロードをdefineComponent+TypeScriptで書きたい

landy77

総合スコア1615

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2021/07/09 03:31

編集2021/07/09 03:32

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日悩んでましたが他の移行はだいたい終わりましたが、後はアップロード処理か?といったところで躓いてしまいまして・・

なにかヒントをよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問