博客

后端

@Component
public class MyCondiguration implements WebMvcConfigurer {
        /**
         * 虚拟路径配置
         * @param registry
         */
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/Document/**").addResourceLocations("file:/D:/xinipic/");
            WebMvcConfigurer.super.addResourceHandlers(registry);
        }

}

第一种，存在本项目的static文件夹下

@RestController
@RequestMapping("/files")
public class FileController {

    /**
     * 单文件上传
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public Result<String> upload(MultipartFile file) { //MultipartFile指的是前端文件
        String filePath = System.getProperty("user.dir") + "/src/main/resources/static/file/"; //文件路径
//上传后的图片保存在本目录的static文件夹下
        String flag = System.currentTimeMillis() + ""+ UUID.randomUUID();  //当前时间的long值创建一个新的名称
        String fileName = file.getOriginalFilename(); //后缀名
        try {
            FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName); //开始上传了
            System.out.println(fileName + "--上传成功");
            Thread.sleep(1L);
        } catch (Exception e) {
            System.err.println(fileName + "--文件上传失败");
        }
        return Result.success(flag);
    }

第二种，存在本机的指定目录下

@PostMapping("/upload1")  //   /api/setmeal/upload
public Result<String> upload1(MultipartFile file) { //使用虚拟路径配置图片地址
    String filePath = "D:/xinipic/";  //存在本机目录下
    log.info("filePath=="+filePath);
    String flag = System.currentTimeMillis() + ""+ UUID.randomUUID();  //当前时间的long值创建一个新的名称
    log.info("图片的新名称是"+flag);
    String fileName = file.getOriginalFilename(); //后缀名
    log.info("后缀名是"+fileName);
    try {
        FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName); //开始上传了
        System.out.println(fileName + "--上传成功");
        Thread.sleep(1L);
    } catch (Exception e) {
        System.err.println(fileName + "--文件上传失败");
    }
    return Result.success(flag);
}

前端

<el-form-item label="上传图片">
    <el-upload
            class="avatar-uploader"
            action="/api/setmeal/upload1"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

<script>

    let urlBase = "/api/setmeal/";
    new Vue({
        el: "#wrapper",
        data: {

            imageUrl: '',

}，

methods: {
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
        //这个是上传前对图片后缀名的校验，除了jpg还可以传png需要自己手动更改
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 10;

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

）}

<script>