zyupload组件上传文件

文件的上传是web开发的一个重要部分，常规的文件上传有以下几个场景：

更多文件上传请移步文件上传，搞懂这8种场景就够了感谢作者@奇舞周刊

这里只简单叙述拖拽和多文件上传方式，使用的组件是zyupload

实现文件上传数据是用字符流二进制的形式，如下：

zyupload组件的使用：

<div id="zyupload" class="zyupload"></div>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "650px",                 // 宽度
            height: "400px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "api/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });

    });
</script>

后端接口：

@Controller
@RequestMapping("/api")
public class FileUpLaodController {
    @CrossOrigin
    @ResponseBody
    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    public String fileUpload(@RequestParam MultipartFile file) throws IOException {
        if(file.isEmpty()){
            return "上传失败!";
        }
        else {
            byte[] bytes = file.getBytes();
            Path path = Paths.get("C:\\Users\\fireapproval\\Desktop\\毕业设计\\数据集\\"+file.getOriginalFilename());
            Files.write(path,bytes);
//            FileWriter fileWriter = new FileWriter(new File("C:\\Users\\fireapproval\\Desktop\\毕业设计\\数据集\\"+file.getOriginalFilename()));
//            fileWriter.close();
        }
        return "C:\\Users\\fireapproval\\Desktop\\毕业设计\\数据集";
    }
}

MultipartFile是Spring上传文件的封装类，包含了文件的二进制流和文件属性等信息，文件可以是图片

The field file exceeds its maximum permitted size of 1048576 bytes

编写完前后台代码后上传文件可能会出现如上的错误，这是由于spring boot默认限制了最大单文件的大小不能超过1048576字节。

spring.servlet.multipart.max-file-size = 100MB  //最大文件大小
spring.servlet.multipart.max-request-size=100MB    //最大请求数量

配置可能会因spring boot的版本有所不一样，这里是spring boot2.7.1版本。

还需要注意的是文件的写入部分：

1. 修改传入文件的地址

2. 注意@CrossOrigin解决跨域问题

3. 写入文件方式及文件路径

byte[] bytes = file.getBytes();

//方法一：
Path path = Paths.get("C:\\Users\\_xiaoxu_\\数据集\\"+file.getOriginalFilename());
Files.write(path,bytes);

//方法二：
FileWriter fileWriter = new FileWriter(new File("C:\\Users\\_xiaoxu_\\数据集\\"+file.getOriginalFilename()));
fileWriter.close();

如下图所示上传成功: