uniapp上传图片 前端以及java后端代码实现 |
您所在的位置：网站首页 › uniapp调用java接口 › uniapp上传图片 前端以及java后端代码实现 |
|
最近在做uniapp相关的开发，在上传图片的时候遇到了一些问题，所幸经过一些努力，解决开发过程中遇到的困难，记录一下uniapp上传图片的实现过程 1、前端代码 setPic1: function() { var me = this; var serverUrl = this.serverUrl; uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], success: function(res) { const tempFilePaths = res.tempFilePaths[0]; uni.uploadFile({ url: serverUrl+ '/api/common/upload', filePath: tempFilePaths, name: 'file', success: (myres) => { var jsonObject = JSON.parse(myres.data); if(jsonObject.code == 0){ var imageUrl = jsonObject.data.url; me.businessLicencesUrl = imageUrl; me.isUploadimg = true; } } }); } }); },uploadFile中URL指向的是自己的上传接口， filePath就是一个临时路径
2、java的后端代码 @ApiOperation("图片上传") @PostMapping("/common/upload") public AjaxResult uploadFile(HttpServletRequest request) throws Exception { try { // 上传文件路径 String filePath = IMAGEHOME; MultipartHttpServletRequest req = (MultipartHttpServletRequest) request; //对应前端的upload的name参数"file" MultipartFile file = req.getFile("file"); // 上传并返回新文件名称 String fileName = FileUploadUtils.upload(filePath, file); String url = serverConfig.getUrl() + fileName; Map result = new HashMap(); result.put("fileName", fileName); result.put("url", url); return AjaxResult.success(result); } catch (Exception e) { return AjaxResult.error(e.getMessage()); } }测试图片上传的功能，最后真机测试，或是通过小程序测试，PC端调试的时候，uniapp生成的临时文件路径可能会有问题，至此图片上传功能完成 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |