vue项目中一张图片文件和表单参数同时上传
组件<van-uploader v-model="uploader" :max-count="1" ref="imgInstance" :after-read="onRead" :before-delete="onDelete />参数设置data () {return {fileData: null,uploader: [],}},onRead方法:onRea.
·
组件
<van-uploader v-model="uploader" :max-count="1" ref="imgInstance" :after-read="onRead" :before-delete="onDelete />
参数设置
data () {
return {
fileData: null,
uploader: [],
}
},
onRead方法:
onRead (file) {
this.fileData = file.file;
return true;
},
onDelete方法(删除选中的文件)
onDelete(file, info){
//this.fileData.splice(info.index, 1);//根据图片索引进行删除
//因为我是一张图片,只需要把它置为空
this.fileData=null;
return true;
},
数据封装上传
onHandle(){
let formData = new FormData()
//文件
formData.append('file', this.fileData);
//表单参数
formData.append(key,value);
},
this.$http({
method: 'post',
url: XXXXXXXXXXXX
headers:{ 'Content-Type': 'multipart/form-data'},
transformRequest:[],
data: formData
}).then(res => {
}).catch(()=>{
});
后端接口
@PostMapping("/appInviteOne")
public Result appInviteOne(@RequestParam(value = "file") MultipartFile file, Map<String,String> params){
return new Result();
}
更多推荐
已为社区贡献1条内容
所有评论(0)