HOME > Vue.js> fetch API

ファイルアップロード axios

axiosを利用

   <input @change="selectedFile" type="file" name="file"><br>
    <button @click="upload" type="submit">アップロード</button>
	<img v-if="img.length !==0" :src="url + img.state">

js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>	
	
 let app = new Vue({
	 el: '#content',
    data: {
        uploadFile: '',
			img: [],
			url: '<?php echo $option['site_url']; ?>',
    },
  methods: {
			selectedFile: function(e) {
					// 選択された File の情報を保存しておく
					e.preventDefault();
					let files = e.target.files;
				console.log(files[0]);
					this.uploadFile = files[0];
			},
		
			upload: function() {
					// FormData を利用して File を POST する
					let formData = new FormData();
					formData.append('file', this.uploadFile);
				
					let config = {
							headers: {
									'Content-Type': 'multipart/form-data'
							}
					};
				
	axios.post('../api/create.php?file_upload', formData, config)
           .then(response => this.img = response.data)
           .catch(response => console.log(response))				
			},
			
	}
 });
</script>