Vue.js というより axios でファイルアップロードをしたかった
保存ボタンがなく、アップロード時にサーバーに送るのを想定
サーバーサイドのFWは Laravel を想定
<template> <div> <!-- ファイルアップロード用の input --> <input type="file" ref="image" accept="image/*" name="image" @change="uploadImage" /> </div> </template> <script> import axios from "axios"; export default { name: "InputFile", methods: { uploadImage() { // parameter の用意 const params = new FormData(); params.append("image", this.$refs.image.files[0]); axios .post(`${process.env.MIX_APP_URL}ファイルアップロード先のURI`, params, { headers: { "Content-Type": "multipart/form-data", Authorization: "XXXXXXXXXXXX", }, }) .then((res) => { console.log(res, res.data); if (res.status !== 200) { console.error("画像のアップロードに失敗。"); return; } // サーバー側のレスポンスに合わせてエラーハンドリングなど if (!res.data.succeeded) { console.error("画像のアップロードに失敗。"); return; } // アップロード成功時の処理 console.log("画像アップロードに成功。"); }) .catch((error) => { console.error(error, error.response); // Laravel のバリデーションエラーの場合のレスポンスに合わせてエラーメッセージを出力 if ( error.response.status === 422 && error.response.data.errors.length !== 0 ) { console.error(error.response.data.errors.image); return; } // その他のエラー console.error("画像のアップロードに失敗。"); return; }); }, }, }; </script>
axios でファイルアップロードってやったことないからどうやるんだろうって思ってたけどよくよく考えたら FormData でパラメータをセットしてPOSTすればいいだけの話だった
参考
株式会社エイルシステムではWebエンジニア・モバイルアプリエンジニアを募集しています。
実務経験がなくてもOKです。ご興味のある方は弊社HPよりご連絡ください。