vue-文件上传

文件上传

1、Elementplus 设置自定义上传

:http-request="handlehttp"
:on-success="handleAvatarSuccess" //上传回显

2、自定义上传方法

async function handlehttp( data:any )
{
  let formData = new FormData;
  formData.append("file",data.file);
  let info= await PostFile(formData);
}

3、上传成功显示

  
    
	const handleAvatarSuccess: UploadProps['onSuccess'] = (
	    response,
	    uploadFile
	) => {
	  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}

4、Axios封装的 api 接口

export function PostFile( file:FormData)
{
    return request.post("/user/upload",file);
}

5、springboot相关接口

@PostMapping("/upload")
public Result<String> uload(MultipartFile file) throws IOException
{
    String originalFilename = file.getOriginalFilename();
    file.transferTo( new File("C:\\Users\\zhangxu\\Desktop\\1\\0\\"+originalFilename));

    return Result.success("返回上传链接");

}

6、上传下载接口

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.1.1</version>
</dependency>

package com.example.demo.controller;

import cn.hutool.core.io.FileUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.demo.mapper.UserMapper;
import com.example.demo.pojo.User;
import jakarta.servlet.ServletOutputStream;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.UUID;

@CrossOrigin
@RestController
@RequestMapping("file")
public class FileController {

    @Autowired
    private UserMapper userMapper;

    @PostMapping("/deleteFile")
    public String DeleteFile(String fileName) throws IOException
    {
        String filePath = "C:\\Users\\zhangxu\\Desktop\\1\\0\\"+fileName;
        System.out.println(filePath);
        Path path = Paths.get(filePath);
        try {
            Files.delete(path);
            return "文件删除成功";
        } catch (IOException e) {
            return "文件删除失败:"+ e.getMessage();
        }
    }

    @PostMapping("/upload")
    public String uload(MultipartFile file) throws IOException
    {
        String originalFilename = file.getOriginalFilename();
        file.transferTo( new File("C:\\Users\\zhangxu\\Desktop\\1\\0\\"+originalFilename));

        return "返回上传链接";

    }

    public static final String filesPath=System.getProperty("user.dir")+"\\files";

    @PostMapping ("/uploadFile")
    public String UploadFile(MultipartFile file) throws IOException
    {
        System.out.println(123);

         String fileName=file.getOriginalFilename();

        System.out.println(fileName);

        //String mainName=FileUtil.mainName(fileName);//文件名字
         String extName=FileUtil.extName(fileName);//后缀名字
         UUID uuid = UUID.randomUUID();
         fileName=uuid+"."+extName;

        File parentFile=new File(filesPath);
        if (!parentFile.exists())
        {
            parentFile.mkdir();
        }
        System.out.println("文件路径:"+filesPath+File.separator+fileName);
        File savaFile=new File(filesPath+File.separator+fileName);
        file.transferTo(savaFile);

        return fileName;
    }

    @GetMapping("/download/{fileName}")
    public void download(@PathVariable String fileName, HttpServletResponse response) throws IOException {
        //以预览方式进行下载
        //   response.addHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(fileName, "UTF-8"));
        //以附件方式进行下载
        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
        String filePath = filesPath + File.separator + fileName;
        System.out.println(filePath);
        if (!FileUtil.exist(filePath)) {
            return;
        }
        byte[] bytes = FileUtil.readBytes(filePath);
        ServletOutputStream outputStream = response.getOutputStream();
        outputStream.write(bytes);
        outputStream.flush();
        outputStream.close();
    }
}

1、maven网站

https://mvnrepository.com/