vue 使用input file点击上传本地图片
<input type="file" @change="upData($event)" ref="InputFile" name="files" />
这里传本地图片给后台(java为例),流程是在点击完input file只后就会发送文件给后台提供的接口,会直接返回一个img路径,然后再传给对应的接口
upData(event) { var reader = new FileReader(); let fileData = this.$refs.InputFile.files[0]; reader.readAsDataURL(fileData); let _this = this; reader.onload = function(e) {
//这里的数据可以使本地图片显示到页面 _this.addimg = e.srcElement.result; }; // 使用formapi打包 let formData = new FormData(); formData.append('file', fileData); this.axios.post('/api/v1/uploads/course/img', formData).then(function(res) { console.log(res); _this.addimgtijiao = res.data.path; }); }