Vue的模板中不用使用Form方式提交，不用使用submit按钮，形式更灵活。
1.使用<input>的file类型，加普通按钮
<div>
<input style="display: flex;align-items: center;" name="file" type="file" accept="image/png,image/gif,image/jpeg"
@change="getFile"/>
<el-button size="mini" @click="submit" type="success">上传</el-button>
</div>
@change监听文件选择的变化，获取变化后的文件
@click="submit"为普通的点击事件
2.由于需求限制一次只能添加一张图片
//数据
fileList: [],
//添加文件方法
getFile(event) {
this.fileList = [];
this.fileList.push(event.target.files[0]);
},
//创建表单对象进行提交的方法
submit() {
let formData = new FormData();
formData.append('file', this.fileList[0]);
goodsApi.uploadImages(formData)
.then(response => {
var ret = response.data;
console.log(JSON.stringify(ret));
if (ret.flag) {
var url = ret.data;
this.pojo.url = url;
this.$forceUpdate();
} else {
this.$message.error(ret.message);
}
})
.catch(error => {
console.log(error)
})
},
3.JS端上传接口实现
uploadImages(files) {
return request({
url: `/${group_name}/uploadImages`,
method: 'post',
data: files,
headers: {'Content-Type': 'multipart/form-data'}
})
},
4.后台接口格式
@PostMapping("/uploadImages")
public Result<String> testUpload(@RequestBody MultipartFile file) {
String url = pictureService.uploadPic(file);
return new Result<>(true, StatusCode.OK, "成功", url);
}
5.后台实现和文件服务器的部署在另一篇中
