kingEditor实现图片上传(1)

最新推荐文章于 2021-11-10 16:19:55 发布

cyclebozhou

最新推荐文章于 2021-11-10 16:19:55 发布

阅读量2.9k

点赞数 2

分类专栏： javaweb技术

本文链接：https://blog.youkuaiyun.com/qq_40359681/article/details/79079220

版权

javaweb技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用FastDFS作为文件存储容器，结合Spring MVC、MyBatis后端架构和AngularJS 1.0前端框架，实现图片上传功能。在后端，通过配置文件上传解析器和FastDFS客户端，处理文件上传；在前端，利用AngularJS创建uploadService.js处理上传逻辑。

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

前言

在图片上传前需要准备: 既然要实现图片上传的功能就需要有一个容器来装上传后的图片,然后使用的框架,和架构,前端js框架

容器:FastDFS(它对文件进行管理，功能包括：文件存储、文件同步、文件访问（文件上传、文件下载）等)

后端架构和框架:Spring MVC,maven,mybatis

前端架构:angularJS1.0

代码

后端代码

1.创建一个maven工程的工具类工程存放工具类
在pom.xml引人依赖(由于部分的浏览器兼容性问题需要添加fastjson相关依赖)

        <!-- 文件上传组件 -->
        <dependency>
                <!--FastDFS相关依赖-->
            <groupId>org.csource.fastdfs</groupId>
            <artifactId>fastdfs</artifactId>
        </dependency>
        <dependency>
            <!--文件上传相关的相关依赖-->
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
        </dependency>   
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->  
<dependency>  
    <groupId>com.alibaba</groupId>  
    <artifactId>fastjson</artifactId>  
    <version>1.2.25</version>  
</dependency>

2.在springmvc.xml文件当中配置一下文件上传解析器

<!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 设定默认编码 -->
    <property name="defaultEncoding" value="UTF-8"></property>
    <!-- 设定文件上传的最大值5MB，5*1024*1024 -->
    <property name="maxUploadSize" value="5242880"></property>
</bean>

3.配置文件
将“资源/fastDFS/配置文件”文件夹中的 fdfs_client.conf
application.properties添加配置

FILE_SERVER_URL=http://192.168.25.133/

控制层

由于部分的浏览器兼容性问题比如Map类型的返回值在火狐浏览器无法识别,解决方法将Map类型变为String类型（也就是json串）

@RestController
public class PicUploadController {

    @Value("${IMAGE_SERVER_URL}")
    private String IMAGE_SERVER_URL;//文件服务器地址

    @RequestMapping("/pic/upload")
    @ResponseBody
    public String uploadPic(MultipartFile uploadFile) {
        try {
            // 首先接收页面上传的文件
            byte[] content = uploadFile.getBytes();
            // 取出文件的扩展名
            String originalFilename = uploadFile.getOriginalFilename();
            String ext = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            // 把这个文件内容上传到图片服务器
            FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/fast_dfs.conf");
            String url = fastDFSClient.uploadFile(content, ext);
            // 从配置文件中取图片服务器的url
            // 创建返回结果对象
            Map result = new HashMap();
            result.put("error", 0);
            result.put("url", IMAGE_SERVER_URL + url);
            // 返回结果
            return JSON.toJSONString(result);
        } catch (Exception e) {
            e.printStackTrace();
            Map result = new HashMap();
            result.put("error", 1);
            result.put("message", "图片上传失败");
            return JSON.toJSONString(result);
        }
    }
}

前端代码

web工程创建uploadService.js

//文件上传服务层
app.service("uploadService",function($http){
    this.uploadFile=function(){
        var formData=new FormData();
        formData.append("file",file.files[0]);   
        return $http({
            method:'POST',
            url:"../upload.do",
            data: formData,
            headers: {'Content-Type':undefined},
            transformRequest: angular.identity
        });     
    }   
});

控制层

app.controller('goodsController' ,function($scope,$controller   ,goodsService,itemCatService,uploadService){.....

页面
引入js

<script type="text/javascript" src="../js/service/uploadService.js">  </script>