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

目录
相关文章
|
1天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
4天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
14 0
|
5天前
|
存储 人工智能 前端开发
从前端到后端,探索Web开发的奥秘
Web开发是当今最热门的技术领域之一,涉及前端、后端、数据库等多个方面。本文将介绍Web开发的基本架构和技术要点,并深入探讨前后端交互、安全性等问题,帮助读者更好地理解Web开发的奥秘。
|
5天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术演进
本文探讨了从前端到后端的技术演进,介绍了前端、后端以及多种编程语言,如Java、Python、C、PHP和Go,以及数据库在构建现代化Web应用中的应用。通过深入剖析各个技术领域的发展和应用,读者将对构建高效、可扩展、安全的Web应用有更深入的理解。
|
8天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
9天前
|
前端开发 JavaScript Java
npm与Maven:前端与后端构建工具深度对比学习
npm与Maven:前端与后端构建工具深度对比学习
|
9天前
|
Dubbo Java 应用服务中间件
Java外包是如何进入阿里的熬夜整理出Java后端学习路线
Java外包是如何进入阿里的熬夜整理出Java后端学习路线
|
9天前
|
前端开发 JavaScript Android开发
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
【5月更文挑战第16天】Uniapp是一个基于Vue.js的跨平台前端框架,能将代码编译成iOS、Android、H5等多个平台应用,简化跨平台开发。相比React和Angular,Uniapp更适合移动应用,减少平台适配工作。Vue.js的组件化和灵活性在Uniapp中得到延伸,增加了移动端特性。而Flutter性能优越,但学习成本高。开发者应根据项目需求和技术栈选择合适的框架。
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
|
1天前
|
安全 Java 大数据
Java多线程编程:深入理解与应用
Java多线程编程:深入理解与应用
|
1天前
|
安全 Java 数据安全/隐私保护
Java中的多线程编程:基础知识与实践
【5月更文挑战第24天】 在现代软件开发中,多线程编程是提升应用性能和响应速度的关键技术之一。Java 作为一种广泛使用的编程语言,其内置的多线程功能为开发者提供了强大的并发处理能力。本文将深入探讨 Java 多线程的基础概念、实现机制以及在实际开发中的应用。我们将从线程的创建和管理出发,逐步讲解同步机制、死锁问题以及如何利用高级并发工具有效地构建稳定、高效的多线程应用。通过理论结合实例的方式,旨在帮助读者掌握 Java 多线程编程的核心技能,并在实际项目中灵活运用。