【无标题】

关于springboot+vue2文件上传的使用

后端实现用了hutool工具。

<!-- hutool  -->
		<dependency>
			<groupId>cn.hutool</groupId>
			<artifactId>hutool-all</artifactId>
			<version>5.7.20</version>
		</dependency>
		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi-ooxml</artifactId>
			<version>4.1.2</version>
		</dependency>

接口实现
FileController.java

package com.example.blog.controller;

import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.json.JSON;
import cn.hutool.json.JSONArray;
import cn.hutool.json.JSONObject;
import com.example.blog.common.lang.Result;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.List;
import java.util.UUID;

@RestController
@RequestMapping("/file")
public class fileController {

    @Value("${server.port}")
    private String port;
    @Value("${server.ip}")
    private  String ip;
    @CrossOrigin
    @PostMapping("/upload")
    public Result upload(MultipartFile file) throws IOException {
        //获取文件名
        String originalFilename = file.getOriginalFilename();
        String flag = UUID.randomUUID().toString();
//        存到哪个目录下
//       System.getProperty("user.dir")当前文件目录
        String rootFilePath = System.getProperty("user.dir")+"/blog/src/main/resources/files/"+flag+"_"+originalFilename;
        FileUtil.writeBytes(file.getBytes(), rootFilePath);//工具类调用
        return Result.success(ip+":"+port+"/files/"+flag);//返回路径
    }

   

//    文件下载
    @GetMapping("/{flag}")
    public void getFiles(@PathVariable String flag, HttpServletResponse response){
        OutputStream os;  // 新建一个输出流对象
        String basePath = System.getProperty("user.dir")+"/blog/src/main/resources/files/";
//      String basePath = System.getProperty("user.dir") + "/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("文件下载失败");
        }

    }
}

用postman测试接口。
选择form-data,select Files那里选择图片
关于前端vue的图片使用。
element-ui提供了上传的组件，这里是2.x版本
Element-ui官网

     <el-form-item label="封面" >
    <!-- <el-upload  ref="upload" action="http://localhost:9090/files/upload" :on-success="fileUploadSuccess">-->
     <el-upload  ref="upload" :action="filesUploadUrl" :on-success="fileUploadSuccess">
      <el-button size="small" type="primary">点击上传</el-button>
     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
       </el-upload>
 </el-form-item>

:action=“上传地址”

:on-success"函数名（handleAvatarSuccess）"

on-success 文件上传成功时的钩子 function(response, file, fileList)

一般是上传成功后，返回回来的数据，讲图片上传了服务器，可以通过赋值来获取这个图片的路径。

handleAvatarSuccess(res) {
this.form.avatarUrl = res.data；
}

图片显示用了element-ui 的image
image

     <el-table-column label="封面">
          <template #default="scope">
              <el-image
                   style="width: 100px; height: 100px"
                     :src="scope.row.cover"
                     :preview-src-list="[scope.row.cover]">
              </el-image>
          </template>
     </el-table-column>

scope.row.cover 是每一行row.取图片这个url地址，就可以显示了。

上传的时候会保留之前的上传文件，可以用$refs

   add(){
         this.dialogFormVisible=true
         this.form={}
         if(this.$refs['upload']){
         this.$refs(['upload']).clearFiles()//清除历史文件列表
            }
         }