商家后台-商品录入【商品图片上传】

最新推荐文章于 2022-06-12 11:51:32 发布

原创

最新推荐文章于 2022-06-12 11:51:32 发布 · 9.2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#商家后台-商品录入【商品图片上传】

本文介绍了在商家后台商品录入界面如何实现多图片上传。通过AngularJS进行异步请求上传图片，结合SpringMVC配置文件上传依赖和解析器来接收上传的文件，同时利用FastDFS作为图片服务器。详细讲述了前端上传服务、图片列表的保存以及图片的移除功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 需求分析

在商品录入界面实现多图片上传

当用户点击新建按钮，弹出上传窗口

实现思路分析：

AngularJS图片上传（异步请求上传图片）。

SpringMVC图片上传（配置文件上传依赖jar包、配置文件上传解析器、控制器接收上传的文件）

FastDFS图片文件器（配置客户端依赖jar包、配置文件、编写上传服务器代码）

商品图片上传:

-- 需求分析
Angularjs图片上传(异步请求上传图片)
-- 异步请求代码
/** 文件上传方法 */
   this.uploadFile = function(){
       /** 创建表单对象 */
       var formData = new FormData(); // html5 FormData
       /** 追加需要上传的文件 */
       formData.append("file", file.files[0]);
       /** 发送异步请求上传文件 */
       return $http({
       method : 'post', // 请求方式
       url : "/upload", // 请求URL
       data : formData, // 表单数据
       headers : {'Content-Type' : undefined}, // 请求头
       transformRequest : angular.identity // 转换对象
       });
   };

 SpringMVC接收上传的文件(配置文件上传依赖jar、
配置文件上传解析器、控制器接收上传的文件)

 FastDFS图片服务器(配置客户端依赖jar、
配置文件、编写上传服务器代码)

注意：开启图片服务器

1.2 图片上传

1.2.1 上传服务

sunny-shop-web/src/main/webapp/js/controller/baseService.js中的uploadFile()方法：

app.service("baseService", function($http){

......
    /** 文件上传方法 */
    this.uploadFile = function(){
        /** 创建表单对象 */
       var formData = new FormData();
        /** 追加需要上传的文件 */
       formData.append("file", file.files[0]);
        /** 发送异步请求上传文件 */
        return $http({
            method : 'post', // 请求方式
            url : "/upload", // 请求URL
           data : formData, // 表单数据
            headers : { 'Content-Type' : undefined}, // 请求头
            transformRequest : angular.identity // 转换对象
        });
    };
});

angularJS对于post和get请求默认的Context-Type header是application/json。通过设置‘Content-Type’: undefined，这样浏览器会帮我们把Content-Type设置为 multipart/form-data.

设置 transformRequest : angular.identity，angularjs transformRequest function 将序列化表单对象中的文件为二进制数据.

1.2.2 前端代码

goods_edit.html，修改图片上传窗口，调用上传方法，回显上传图片(300行左右)