詳解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

 

轉存失敗重新上傳取消