1.HTML部分
<template>
<div class="container">
<input id="input" type="file" name="image">
<button type="submit" @click="onFile">提交</button>
</div>
</template>
2. スクリプト部分
<script>
// 引入上传图片接口
import { uploadImage } from '../../../api/login/loginRegApi'
export default {
methods: {
onFile () {
// 获取到上传的文件
var myFile = document.getElementById('input').files[0];
console.log(myFile);
// 获取到文件不能直接传给后端
// 利用formData传给后端
var formData = new FormData();
formData.append('image',myFile); // 'image'要和后端接口需要的参数名一致
// 上传图片接口
uploadImage(formData).then(res => {
if (res.code === 200) {
console.log(res.data);
}
})
}
}
}
</script>
これにより、画像がバックエンドにアップロードされます