Vue上传文件遇到的问题[通俗易懂]

<el-form-item label="讲师头像">
<!-- 头衔缩略图 -->
<pan-thumb :image="teacher.avatar"/>
<!-- 文件上传按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
</el-button>
<!-- v-show：是否显示上传组件 :key：类似于id，如果一个页面多个图片上传控件，可以做区分 :url：后台上传的url地址 @close：关闭上传组件 @crop-upload-success：上传成功后的回调 <input type="file" name="file"/> -->
<image-cropper v-show="imagecropperShow" :width="300" :height="300" :key="imagecropperKey" :url="BASE_API+'/eduoss/fileoss'" field="file" @close="close" @crop-upload-success="cropSuccess"/>
</el-form-item>

<form autocomplete="off">
<!--省略其他输入域……-->
<div class="form-group">
<input class="form-control" type="file" name="fileupload" @change="upLoadPicture($event)" v-model="member.avatar" accept="image/*">
<i class="icon_images"></i>
</div>
<!--省略其他输入域……-->
<div id="pass-info" class="clearfix"></div>
<a href="#0" class="btn_1 gradient full-width">立即注册!</a>
</form>

let vm = new Vue({ 

el: "#app",
data() { 

return { 

member: { 

mobile: "",
password: "",
nickname: "",
avatar: "",
code: "",
}
}
},
methods: { 

upLoadPicture(e) { 

//获取文件
let file = e.target.files[0]
//将文件放入表单文件
let formData = new FormData();
formData.append('file', file);
//上传文件
axios.post("http://localhost:8004/oss/fileoss", formData)
.then(response => { 

alert("头像上传成功！")
//将返回的图片url赋值给member
vm.member.avatar=response.data.data.url
})
}
}
})

@PostMapping
public R uploadOssFile(MultipartFile file){ 

//获取文件
//返回上传文件路径
String url=ossService.uploadFileAvatar(file);
return R.ok().data("url",url);
}