ファイルアップロード 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>