SpringBoot+Vue+ElementUI实现图片和表单一起上传

整体思路

1. 首先将图片上传至服务器，并且后端上传图片的方法返回一个Reslut，这个Result中保存图片名称以及自己想要回传前端的其他信息。
2. 前端在回传图片方法中接收传回来的Result，并将其中的图片名称赋值给实体类的图片属性。
3. 在上传图片的那一刻前端实体类的图片属性已经有后端传过来的值了，所以此时提交表单信息，后端接收请求把信息保存到数据库就可以了。

1.首先将图片上传至服务器，并且后端上传图片的方法返回一个Reslut，这个Result中保存图片名称以及自己想要回传前端的其他信息。

<el-form-item label="上传图片:" :label-width="formLabelWidth" prop="image">
  <el-input v-model="book.image" v-if="false"></el-input>
  <el-upload class="upload-demo" ref="upload" drag action="http://localhost:****/****/upload" multiple
    :on-success="handleAvatarSuccess">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将文件拖到此处，或<em>点击上传</em>
    </div>
  </el-upload>
</el-form-item>

这里的fileNames保存的就是服务器上的图片名称，当然也可以回传一个restResult。工具类在最后给出。

@ResponseBody
@RequestMapping("/upload")
public String upload1(@RequestParam("file") MultipartFile imgFile, HttpServletRequest request, HttpSession session){

    ObjectRESTResult restResult = new ObjectRESTResult();

    // 生成唯一文件名
    String uuid = UUID.randomUUID().toString().trim();
    String filename = imgFile.getOriginalFilename();
    int index=filename.indexOf(".");
    String fileNames= uuid + filename;

    // 调用UploadUtils工具类将图片存放到服务器上
    File fileDir = UploadUtils.getImgDirFile();

    try {
        // 构建真实的文件路径
        File newFile = new File(fileDir.getAbsolutePath() + File.separator + fileNames);
        System.out.println(newFile.getAbsolutePath());
        imgFile.transferTo(newFile);

    } catch (IOException e) {
        e.printStackTrace();
    }
    Map<String,Object> emp = new HashMap<>();
    emp.put("fileName",fileNames);
    //返回图片名称
    restResult.setReturnObj(emp);
    return fileNames;
}

2. 前端在回传图片方法中接收传回来的Result，并将其中的图片名称赋值给实体类的图片属性。

//图片回显
handleAvatarSuccess(res, file) {
  console.log(res);
  this.book.image = res;
}

3. 在上传图片的那一刻前端实体类的图片属性已经有后端传过来的值了，所以此时提交表单信息，后端接收请求把信息保存到数据库就可以了。

工具类

public class ObjectRESTResult {
    protected int statusCode;
    protected Object returnObj;
    protected String msg;

    public ObjectRESTResult() {
    }

    public String getMsg() {
        return this.msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public int getStatusCode() {
        return this.statusCode;
    }

    public void setStatusCode(int statusCode) {
        this.statusCode = statusCode;
    }

    public Object getReturnObj() {
        return this.returnObj;
    }

    public void setReturnObj(Object returnObj) {
        this.returnObj = returnObj;
    }
}

import java.io.File;

public class UploadUtils {
    //静态资源路径
    public final static String IMG_PATH_PREFIX = "E:\**\resources\static\image";

    public static File getImgDirFile() {
        //dome是项目名
        String fileDirPath = new String(IMG_PATH_PREFIX);

        File fileDir = new File(fileDirPath);
        if (!fileDir.exists()) {

            fileDir.mkdirs();
        }
        return fileDir;
    }
}