Springboot项目中客户端app对图片的上传

博主介绍:本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;

🍅文章末尾获取源码下载方式🍅

目录

1:效果演示

2:客户端提交文件

3:服务端接口代码

4:KindEditorResult类

5:图片的显示


1:效果演示

2:客户端提交文件
 FinalHttp finalHttp = new FinalHttp();
                    AjaxParams params = new AjaxParams();
                    try {
                        params.put("userImage", new File(imagePath));
                    } catch (FileNotFoundException e) {
                        e.printStackTrace();
                    }
                    finalHttp.post(Consts.URL + "uploadImage", params, new AjaxCallBack<Object>() {
                        @Override
                        public void onStart() {
                            super.onStart();
                        }
                        @Override
                        public void onSuccess(Object o) {
                            super.onSuccess(o);
                            JSONObject jo = null;
                            try {
                                jo = new JSONObject((String)o);
                            } catch (JSONException e) {
                                e.printStackTrace();
                            }
                            ResponseEntry entry = new ResponseEntry();
                            entry.setRepCode(jo.optString("repCode"));
                            entry.setRepMsg(jo.optString("repMsg"));
                            if (jo.optString("repCode").equals("666")) {
                                userImage = jo.optString("data");
                                Picasso.with(CreateFoodActivity.this).load(Consts.URL_IMAGE + jo.optString("data"))
                                        .placeholder(R.drawable.default_drawable_show_pictrue).into(mivShop);
                            }
                        }
                        @Override
                        public void onFailure(Throwable t, int errorNo, String strMsg) {
                            super.onFailure(t, errorNo, strMsg);
                        }
                    });
3:服务端接口代码
@RequestMapping("/uploadImage")
@ResponseBody
public void uploadImg(HttpServletRequest request, HttpServletResponse response, @RequestParam("userImage") MultipartFile imgFile){
    KindEditorResult result = new KindEditorResult();

    try {
        // 获取绝对路径
        String realPath = request.getServletContext().getRealPath("/upload");
        File imageFolder = new File(realPath); //查看是否有该文件夹
        if (!imageFolder.exists()) { //如果不存在
            imageFolder.mkdirs(); //创建该文件夹
        }
        //如果存在,将图片的名称重新命名
        String fileName = imgFile.getOriginalFilename();
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        String imageName= UUID.randomUUID()+suffixName;
        // 上传文件
        imgFile.transferTo(new File(realPath, imageName));
        result.setError(0);
        result.setUrl(realPath + "/" + imageName);
        result.setMessage("上传图片成功!");
        JSONObject jsonmsg = new JSONObject();
        jsonmsg.put("repMsg", "ok");
        jsonmsg.put("repCode", "666");
        jsonmsg.put("data",imageName);
        response.getWriter().print(jsonmsg);// 将路径返回给客户端
        System.out.println(jsonmsg);

    } catch (Exception e) {
        result.setMessage("上传图片出错!");
    }
}
4:KindEditorResult类
public class KindEditorResult {

    private Integer error;// 0成功 1失败
    private String url;// 上传成功时路径
    private String message;// 上传失败时信息

    public Integer getError() {
        return error;
    }

    public void setError(Integer error) {
        this.error = error;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

}
5:图片的显示
<img data-action="zoom" style="padding: 5px" height="35px" width="50px" src="${model.image}"  />

大家点赞、收藏、关注、评论啦 、查看👇🏻👇🏻👇🏻获取联系方式👇🏻👇🏻👇🏻

Spring Boot项目中集成Vue.js前端项目通常涉及到两部分配置:前端构建和后端API通信。以下是简单的步骤: 1. **设置前端结构**: - 创建一个新的文件夹,例如`src/main/resources/static`,用于存放Vue项目的静态资源(如HTML、CSS、JS文件)。 - 安装并初始化Vue CLI,然后创建一个新的Vue项目到这个目录下。 ```sh cd src/main/resources/static npx vue create frontend-app ``` 2. **配置Webpack**: - 需要在Spring Boot的`application.properties`或`application.yml`中配置WebpackDevServer作为静态资源处理器。例如: ``` spring.mvc.static-path-pattern=/static/** server.port=8080 devtools.restart.enabled=true ``` 这样可以让Spring Boot服务器代理Webpack的请求。 3. **运行Vue项目**: - 在Vue项目目录下启动开发服务器: ```sh cd frontend-app npm run serve ``` 然后浏览器会自动打开本地开发环境。 4. **编写RESTful API**: - 在Spring Boot中创建后端控制器,提供RESTful API供前端访问数据。比如GET、POST等操作。 ```java @RestController public class UserController { @GetMapping("/users") List<User> getUsers() { // 返回用户列表 } } ``` 5. **前端与后端通信**: - Vue通过axios库或其他HTTP客户端库与后端API交互。在`main.js`中配置axios默认配置,指向Spring Boot应用的URL。 6. **部署**: - 当前端开发完成后,将静态资源(`static`)目录打包成生产环境。然后将打包后的文件上传Spring Boot项目的`public`目录或相应的静态资源路径。 相关问题: 1. 如何配置Vue CLI以生成适应Spring Boot的前端结构? 2. Spring Boot如何处理Vue的静态资源请求? 3. 如果我想在生产环境中部署Vue应用,需要做哪些额外配置?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Android毕业设计源码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值