vue布局
<el-upload
class="upload-demo"
ref="upload"
:show-file-list="showList"
action="no"
accept="image/jpeg,image/gif,image/png"
:http-request="onChange"
>
<el-button size="small" type="primary">本地新增</el-button>
</el-upload>
同页面下对应的 js 方法
import {
addFromStranger } from "@/api/business/duty/feature";
//本地上传input触发事件
onChange(file) {
console.log(file)
let formData = new FormData()
formData.append('file', file.file)
formData.append('userId',this.$route.params.userId)
console.log(formData)
addFeature(formData).then(res => {
console.log(res);
this.msgSuccess("添加成功");
this.getAllImg()
})
},
api
headers: { 'content-type': 'multipart/form-data' }
会与 @RequestBody 冲突,不能用@RequestBody 接取数据
export function addFeature(data) {
return request({
url: '/duty/feature',
method: 'post',
data: data,
headers: {
'content-type': 'multipart/form-data' },
})
}
SpringBoot 后端
@RestController
@RequestMapping("/duty/feature")
public class CcccCheckonworkFaceFeatureController extends BaseController
{
@PreAuthorize("@ss.hasPermi('system:feature:add')")
@PostMapping()
public AjaxResult add(@RequestParam("file") MultipartFile file, @RequestParam("userId") String userId){
FaceFeatureDto faceFeatureDto = new FaceFeatureDto();
faceFeatureDto.setUserId(Long.valueOf(userId));
faceFeatureDto.setFile(file);
return toAjax(ccccCheckonworkFaceFeatureService.insertCcccCheckonworkFaceFeature(faceFeatureDto));
}