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監(jiān)聽文件選擇的變化火惊，獲取變化后的文件
@click="submit"為普通的點(diǎn)擊事件
2.由于需求限制一次只能添加一張圖片
//數(shù)據(jù)
fileList: [],
//添加文件方法
getFile(event) {
this.fileList = [];
this.fileList.push(event.target.files[0]);
},
//創(chuàng)建表單對象進(jìn)行提交的方法
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端上傳接口實(shí)現(xiàn)
uploadImages(files) {
return request({
url: `/${group_name}/uploadImages`,
method: 'post',
data: files,
headers: {'Content-Type': 'multipart/form-data'}
})
},
4.后臺(tái)接口格式
@PostMapping("/uploadImages")
public Result<String> testUpload(@RequestBody MultipartFile file) {
String url = pictureService.uploadPic(file);
return new Result<>(true, StatusCode.OK, "成功", url);
}
5.后臺(tái)實(shí)現(xiàn)和文件服務(wù)器的部署在另一篇中
