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

相关推荐
_默_几秒前
前端常用依赖归纳【vueuse\lodash-es\dayjs\bignumber】
大数据·前端·elasticsearch
Spirited_Away几秒前
修改请求头插件迁移manifest V3记录
前端·chrome
cindershade2 分钟前
使用 SSE 单向推送实现 系统通知功能
前端
Mapmost3 分钟前
【高斯泼溅】Mapmost分区训练,让大场景3DGS建模从此高效且高质
前端
进击的野人3 分钟前
Vue生命周期详解:从创建到销毁的全过程
前端·vue.js·面试
鹏北海3 分钟前
微前端实现方式:HTML Entry 与 JS Entry 的区别
前端·javascript·面试
用户4099322502125 分钟前
Vue3的`:style`对象语法:单位、属性名、响应式,这些细节你都踩过坑吗?
前端·ai编程·trae
Mintopia7 分钟前
🎯 Rect 中鼠标移动拾取元素可行性架构分析
前端·react.js·架构
水臭7 分钟前
一个“够用就好”的浏览器端实时预览编辑器
前端
coding随想8 分钟前
前端革命:自定义元素如何让HTML元素“活“起来,重构你的开发体验!
前端·重构·html