springboot+vue实现图片的上传和选择

依赖导入

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

文件上传和下载

在springboot项目下的controller层定义一个FileController类实现文件的上传和下载功能，如下：

@RestController
@RequestMapping("/files")
public class FileController {
    @Value("${server.port}")
    private String port;
    private static final String ip = "http://localhost";

    /**
     * 上传接口
     * @param file
     * @return
     */

    @PostMapping("/upload")
    public Result<?> upload(MultipartFile file){
        String originalFilename = file.getOriginalFilename();//获取源文件的名称
	//        定义文件的唯一标识（前缀）
        String flag = IdUtil.fastSimpleUUID();

        String rootFilePath = System.getProperty("user.dir")+"/daxiongmao_backend/src/main/resources/files/"+flag+"_"+originalFilename;//获取文件上传的路径
        try {
            FileUtil.writeBytes(file.getBytes(),rootFilePath);//把文件写入该路径
        } catch (IOException e) {
            e.printStackTrace();
        }
        String url = ip+":"+port+"/files/"+flag;
        return Result.success(url);//返回结果url
    }

    /**
     * 下载接口
     * @param flag
     * @param response
     */
    @GetMapping("/{flag}")
    public void getFiles(@PathVariable String flag, HttpServletResponse response){
        OutputStream os;//新建一个输出对象
        String basePath = System.getProperty("user.dir")+"/daxiongmao_backend/src/main/resources/files/";//文件路径
        List<String> fileNames = FileUtil.listFileNames((basePath));//获取所有的文件名称
        String fileName = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse("");//找到根参数一致的文件

        try {
            if (StrUtil.isNotEmpty(fileName)){
                response.addHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode(fileName,"UTF-8"));
                response.setContentType("application/octet-stream");
                byte[] bytes = FileUtil.readBytes(basePath + fileName);//通过文件路径读取文字节流
                os = response.getOutputStream();//通过输出流返回文件
                os.write(bytes);
                os.flush();
                os.close();
            }
        }catch (Exception e){
            System.out.println("文件下载失败");
        }
    }
   }

vue上传图片

在与后端的controller层的添加方法相对应，在vue中通过表单输入添加的信息，action="http://localhost:8081/files/upload"是对于FileController中文件上传的地址。

   <el-form-item label="头像">
            <el-upload ref="upload" action="http://localhost:8081/files/upload" :on-success="filesUploadSuccess">
              <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

在script中实现方法与后端对接：

export default {
name: 'User',
 components: {

 },
  data() {
	 return {
	 form:[]
	 }
},
 methods:{
 save(){
 request.post("/api/user",this.form).then(res =>{
      console.log(res);
      if (res.code==='0'){
        this.$message({
          type: "success",
          message: "新增成功"
        })
      }else {
        this.$message({
          type: "error",
          message: res.msg
        })
      }
 },
filesUploadSuccess(res){
  console.log(res);
  this.form.picture = res.data;
  this.load();
}