详解Springboot+MultipartFile+Ant Design of Vue进行图片上传,多文件上传

1.效果展示 

 

2.Ant Design of Vue代码

1. info.file.originFileObj拿到图片信息
2. FormData封装数据
3. 请求头'Content-Type': 'multipart/form-data'
4. 请求类型post
5. 多文件上传直接将这个数组对象里添加图片信息this.fileList.push(info.file.originFileObj)

           <a-form-item
              label="分类图片"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 13, offset: 1}">
              <a-upload
                name="avatar"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                @change="handleChange"
              >
                <img v-if="imgUrl" :src="imgUrl" alt="avatar" style="width: 100% "/>
                <div v-else>
                  <a-icon :type="loading2 ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
            </a-form-item>

function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

  // 图片上传，获取到图片得文件流，保存到fileList中
    handleChange (info) {
      this.imgUrl = ''
      if (info.file.status === 'uploading') return this.loading2 = true
      if (info.file.status === 'done') {
        getBase64(info.file.originFileObj, imageUrl => {
          this.imgUrl = imageUrl
          this.loading2 = false
        })
        this.fileList = info.file.originFileObj
      }
    }

•  使用formData封装数据

// 弹出框确认按钮
    handleOk (e) {

        const formData = new FormData()
        formData.append('file', this.fileList)

        this.$upload('/cm_classify', formData).then(r => {
          if (r.data.code === 200) {
            this.btnSearch()
          }
          this.$message.warning(r.data.msg)
          this.loading = false
          this.visible = false
        }).catch(() => {
          this.loading = false
          this.visible = false
        })
    }

• 请求头请加上  'Content-Type': 'multipart/form-data'

3.SpringBoot代码 

1. @RequestParam("file")接收前端请求数据
2. 请求类型post
3. 多文件上传请使用@RequestParam(value = "files") MultipartFile[] files接收前端请求数据

•  controller

    @PostMapping
    public Result add(@RequestParam("file") MultipartFile file) throws Exception{
        return iCmClassifyService.add(file);
    }

• servicerImpl

    /**
     * 文件上传工具类
     */
    @Autowired
    private FileUtil fileUtil;

    @Transactional
    public Result add(@RequestParam("file") MultipartFile file) throws Exception {

        // 获取文件，文件名
        file.getOriginalFilename ();
        // uploadFile 方法执行图片上传
        fileUtil.uploadFile (file);

        return Result.success ();
    }

• FileUtil工具类

/**
 * lixin
 * 上传下载文件工具类
 */
@Component
public class FileUtil {

    @Value("${file.path}")
    private String dirpath;

    /**
     * 单文件上传
     *
     * @param file
     * @return
     * @throws Exception
     */
    public String uploadFile(MultipartFile file) throws Exception {
        // 首先校验图片格式
        List<String> imageType = Lists.newArrayList("jpg", "jpeg", "png", "bmp", "gif");
        // 获取文件名，带后缀
        String originalFilename = file.getOriginalFilename();
        // 获取文件的后缀格式
        String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1).toLowerCase();
        if (imageType.contains(fileSuffix)) {
            // 只有当满足图片格式时才进来，重新赋图片名，防止出现名称重复的情况
            String newFileName = System.currentTimeMillis() + "." + fileSuffix;
            String path = File.separator + newFileName;
            File destFile = new File(this.dirpath + path);
            if (!destFile.getParentFile().exists()) {
                destFile.getParentFile().mkdirs();
            }
            try {
                file.transferTo(destFile);
                // 返回上传的文件名
                return newFileName;
            } catch (IOException e) {
                return null;
            }
        } else {
            // 非法文件
            throw new Exception("the picture's suffix is illegal");
        }
    }

    /**
     * 多文件上传 返回上传后的文件名和原文件名
     *
     * @param file
     * @return
     * @throws Exception
     */
    public Map<String, String> uploadFiles(MultipartFile[] file) throws Exception {
        String fileNames[] = new String[file.length];
        String saveFileNames[] = new String[file.length];
        for (int i = 0, len = file.length; i < len; i++) {
            String fileName = file[i].getOriginalFilename();
            fileNames[i] = fileName;
            String saveFileName = uploadFile(file[i]);
            saveFileNames[i] = saveFileName;
        }
        Map<String, String> map = new HashMap<>();
        map.put("fileNames", String.join(",", fileNames));
        map.put("saveFileNames", String.join(",", saveFileNames));
        return map;
    }
}

• appliction.yml

spring:
  servlet:
    multipart:
      #单个数据的大小
      max-file-size: 100MB
      #总数据的大小
      max-request-size: 100MB

# 上传文件路径
file:
  path: D://file/static/img

转存失败重新上传取消