vue3 实现文件上传

1、上传文件html

2、上面引入的common.js

import https from '@/utils/https';

//图片上传接口
export function uploadImg(mkdir,data) {
  return https({
    url: `/admin/common/upload/${mkdir}`,
    method: 'post',
    data: data
  })
}

 

3、后端接口

@RestController
@RequestMapping("admin/common")
public class CommonController {

    @PostMapping("/upload/{mkdir}")
    public Result upload(@RequestParam("file") MultipartFile file,@PathVariable("mkdir")String mkdir) {
        if (file.isEmpty()) {
            return Result.failure("40400","上传文件为空");
        }
        String rootPath = filePath+mkdir+"/";
        File file1 = new File(rootPath);
        if(!file1.exists()){
            file1.mkdirs();
        }
        log.info("上传文件1:"+file1);
        String originalFilename = file.getOriginalFilename();
        String sub=originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length());
        // 改用uuid为图片名称
        String fileName = UUIDUtils.getId() + sub;
        File dest = new File(rootPath + fileName);
        log.info("上传文件2:"+dest);
        try {
            file.transferTo(dest);
            return Result.success(fileHttp+mkdir+"/"+fileName);
        } catch (IOException e) {
            log.error("上传文件错误",e);
        }
        return Result.failure("40400","上传失败");
    }
}

注：filePath 是你保存到本地的地址，在配置文件中配置；fileHttp 是上传文件路由地址，如下：

filePath: D:/sy_data/upload/ 
fileHttp: http://你的ip地址:18080/upload/