vue中使用element的上传组件

1 前端页面

我把上传文件组件放在了一个抽屉组件里面

  <el-drawer
        title="上传文件"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8848/bas/file/"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-drawer>

1.1 需要注意的是

• 上传组件action属性需要修改为后端对应路径
• 文件选择框默认对应的name值为file
  如果想要修改文件输入选择框对应的name值只需自定义一下即可。
  如：

name="myfile"

此时请求负载中的键已经变成了myfile

2 后端代码

获取文件后上传到minio服务器

    @CrossOrigin
    @PostMapping("/file")
    public SysResponseBody<String> getFile(@RequestParam("file") MultipartFile multipartFile) throws IOException {
        String originalFilename = multipartFile.getOriginalFilename();
        String filePostFix = originalFilename.substring(originalFilename.lastIndexOf("."));
        String name = multipartFile.getName();
        InputStream inputStream = multipartFile.getInputStream();
        Resource resource = multipartFile.getResource();
        //String file = FileController.class.getClassLoader().getResource("/static").getFile();
        //File destFile=new File("D:\\docments\\学习笔记\\前端H5\\h5\\"+ UUID.randomUUID().toString()+filePostFix);
        //multipartFile.transferTo(destFile);
        try {
            minioClient.putObject("test",UUID.randomUUID().toString()+filePostFix,inputStream,new PutObjectOptions(multipartFile.getSize(),PutObjectOptions.MIN_MULTIPART_SIZE));
        } catch (ErrorResponseException e) {
            e.printStackTrace();
        } catch (InsufficientDataException e) {
            e.printStackTrace();
        } catch (InternalException e) {
            e.printStackTrace();
        } catch (InvalidBucketNameException e) {
            e.printStackTrace();
        } catch (InvalidKeyException e) {
            e.printStackTrace();
        } catch (InvalidResponseException e) {
            e.printStackTrace();
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (XmlParserException e) {
            e.printStackTrace();
        }
        SysResponseBody<String> stringSysResponseBody=new SysResponseBody<>();
        stringSysResponseBody.setStatusCode(200);
        stringSysResponseBody.setMessage("保存成功");
        return stringSysResponseBody;
    }

2.1 需要注意的是

• @CrossOrigin解决跨域问题
• @RequestParam(“file”) 和前端name值保持一致
• 文件过大异常
  the request was rejected because its size (38062321) exceeds
  配置文件新增配置即可

# 上传和请求文件大小
spring.servlet.multipart.max-file-size=500MB
spring.servlet.multipart.max-request-size=500MB

上传成功后后台组件下面会有提示

minio服务器中也会有对应的文件