前端

在此借助ElementUI中的upload上传组件。

<el-upload
    :before-upload="beforeAlbumUpload"
    :on-success="handleAlbumSuccess"
    :show-file-list="false"
    accept="image/*"
    action="http://localhost:8989/test/upload"
    class="avatar-uploader"
    name="file">
    <img :src="imageUrl" alt="专辑图片" class="avatar" v-if="imageUrl">
    <i class="el-icon-plus avatar-uploader-icon" v-else></i>
</el-upload>

1. action表示文件上传的服务器地址接口，即上传到哪里

2. :before-upload表示在文件进行上传之间对文件进行的操作，可以对文件类型，大小进行限制，ElementUI官网的例子

beforeAlbumUpload(file: any) {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
    this.$message.error('上传图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
    this.$message.error('上传图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
}

3. :on-success表示文件上传成功之后，调用的一个方法

handleAlbumSuccess(res: any, file: any) {
    // res表示后端的返回值，其中应包含文件上传后的url路径
    console.log(res);
    // file表示这个上传文件本身
    console.log(file);
    // 不是很清楚这个URL创建的方法，应该是文件展示的一种方式
    // this.imageUrl = URL.createObjectURL(file.raw);
    // 此处可以将上传成功的文件url赋值给image的src属性，一般为相对路径，需要拼接为完整的url
    this.imageUrl = 'http://www.another.ren/audios/' + res;
}

4. name表示上传文件时文件的名字，与后端保持一致

5. accept表示选择文件时的默认类型限制，只是一个默认方式，用户可以修改，需要进行校验

---

后端

后端借助SpringBoot的MultipartFile进行文件存储

1. 文件上传工具

public class FileUploadUtil {
    /**
     * 上传文件
     *
     * @param multipartFile
     * @return 文件存储路径
     */
    public static String upload(MultipartFile multipartFile) {
        // 文件存储位置，文件的目录要存在才行，可以先创建文件目录，然后进行存储
        String filePath = "D:/" + multipartFile.getOriginalFilename();
        File file = new File(filePath);
        if (!file.exists()) {
            try {
                file.createNewFile();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        // 文件存储
        try {
            multipartFile.transferTo(file);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return file.getAbsolutePath();
    }
}

2. 文件上传控制层

@RestController
@RequestMapping(value = "/test")
public class TestController {
    @PostMapping(value = "/upload")
    // 此处的@RequestParam中的file名应与前端upload组件中的name的值保持一致
    public String upload(@RequestParam("file") MultipartFile multipartFile) {
        // replaceAll 用来替换windows中的\\ 为 /
        return FileUploadUtil.upload(multipartFile).replaceAll("\\\\", "/");
    }
}

3. 可以在配置文件中修改文件上传的相关配置

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/cloudmusic?serverTimezone=UTC
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  servlet:
    multipart:
      # 最大文件大小
      max-file-size: 100MB
      # 最大请求大小
      max-request-size: 100MB
server:
  port: 8989