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