一次dropzone体验-白红宇

一次dropzone体验

阅读量：4552 次

发布时间：2019-06-08

本文共 5348 字，大约阅读时间需要 17 分钟。

对于前端，本人不是太擅长，对于当前的一些网上的样例，也许是习武悟性太差，不是太透，所以只能通过blog的方式记录下一些武功套路，便于以后查询使用

首先，我们需要知道这个武功适应的战场。

什么是dropzone？

DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库，它是轻量级的，不依赖任何其他类库（如JQuery）并且高度可定制.

支持浏览器：

Chrome 7+

Firefox 4+

IE 10+

Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)

Safari 6+

对于所有其他浏览器 , dropzone 提供了一个 file input 作为应对策略，对于老旧的浏览器，会出现file input，还是可以文件上传的。

资源

官网：https://www.dropzonejs.com/

GitHub：

看demo:

dropzone.html

    
         Title

后台：

package com.paic.phssp.springtest.dropzone;import com.fasterxml.jackson.core.JsonProcessingException;import com.fasterxml.jackson.databind.ObjectMapper;import com.mongodb.util.JSON;import com.paic.phssp.springtest.dto.Student;import com.rabbitmq.tools.json.JSONUtil;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.boot.autoconfigure.EnableAutoConfiguration;import org.springframework.boot.json.JsonParser;import org.springframework.http.HttpStatus;import org.springframework.http.ResponseEntity;import org.springframework.stereotype.Controller;import org.springframework.util.MultiValueMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;import javax.annotation.Resource;import javax.servlet.http.HttpServletRequest;import java.io.File;import java.io.IOException;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.UUID;/** * 文件上传demo */@Controller@EnableAutoConfigurationpublic class DropzoneController {    private final Logger log = LoggerFactory.getLogger(getClass());    @Resource    private Student student;    @RequestMapping("/dropzone")    private String toDropzonePage() {        System.out.println("Hello World.....");        return "dropzone";    }    @RequestMapping("/uploadFile")    private ResponseEntity
     
       uploadFile(MultipartHttpServletRequest request) {        log.info("start upload file ......");        HttpStatus httpStatus = HttpStatus.INTERNAL_SERVER_ERROR;//status code 500        Map
      
        loadResultMap = new HashMap
       
        ();        MultiValueMap
        
          multiMap = request.getMultiFileMap();        String taskKey = request.getParameter("taskKey");        log.info("taskKey = "+taskKey);        String filePath = "F:\\test";        //TODO 异常        //int i = 9/0;        for (Map.Entry
         
          > entry : multiMap.entrySet()) {            List
          
            mFList = entry.getValue(); for (MultipartFile mFile : mFList) { int loadResult = loadFile(mFile, filePath); String fileName = mFile.getOriginalFilename(); loadResultMap.put(fileName, loadResult); } } //封装返回 ObjectMapper objMapper = new ObjectMapper(); String body = ""; try { body = objMapper.writeValueAsString(loadResultMap); httpStatus = HttpStatus.OK; } catch (JsonProcessingException e) { log.error("load file error", e); } catch (Exception e) { log.error("load file error", e); } ResponseEntity responseEntity = new ResponseEntity(body, httpStatus); return responseEntity; } private int loadFile(MultipartFile mfile, String filePath) { log.error("load file param=", mfile.toString()); int result = 1; // 获取上传的原始文件名 String fileName = mfile.getOriginalFilename(); //TODO 制造有失败上传场景 /* if(fileName.equals("5a38b9ee3b7fb.jpg")){ return result; }*/ String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length()); // 判断并创建上传用的文件夹 File file = new File(filePath); if (!file.exists()) { file.mkdir(); } // 重新设置文件名为 UUID，以确保唯一 file = new File(filePath, UUID.randomUUID() + fileSuffix); result = 0; try { // 写入文件 mfile.transferTo(file); } catch (IOException e) { log.error("load file error", e); } return result; }}

可能的报错：

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of xxx bytes.

解决方案：

#springBoot自带tomcat，Post请求参数默认限制1024，设置0就不限制大小了server.tomcat.max-http-post-size=0

1）在配置文件（application.properties）加入如下代码，一般这个方法解决不了问题

multipart.maxFileSize = 10Mbmultipart.maxRequestSize=100Mb

2）把如下代码放在启动类上，并在类上加入@Configuration

@Bean    public MultipartConfigElement multipartConfigElement() {        MultipartConfigFactory factory = new MultipartConfigFactory();        //  单个数据大小        factory.setMaxFileSize(DataSize.ofMegabytes(2L));        /// 总上传数据大小        factory.setMaxRequestSize(DataSize.ofMegabytes(10L));        return factory.createMultipartConfig();    }

测试：

（1）未写就异常失败了；//TODO 异常，放开

（2）因为uploadMultiple=true(一次请求可{

{parallelUploads}}文件)，成功与失败都有，//TODO 制造有失败上传场景，放开

（3）成功，主要看下，前端file打印：

参考：

https://blog.csdn.net/weixin_40119256/article/details/81843361

https://blog.csdn.net/qq_25446311/article/details/78600354

转载于:https://www.cnblogs.com/xiaozhuanfeng/p/10500319.html

你可能感兴趣的文章