最近在做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<String, Object> 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生成的临时文件路径可能会有问题,至此图片上传功能完成。