element+vue+springBoot完整版上传图片

1、vue.vue

<template>
  <div>
  	<el-form-item label="图片地址" prop="pictureAddress">
        <el-upload
          class="avatar-uploader"
          :action="url"
          :show-file-list="false"
          :on-success="successHandle">
          <img v-if="dataForm.pictureAddress" :src="dataForm.pictureAddress" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
	export default {
     
	  data(){
     
		return {
     
		 url: this.$http.adornUrl(`/active/upload/upImage?token=${
       this.$cookie.get('token')}`),
		 dataForm: {
     
          pictureAddress: ''
        },
        methods: {
     
          // 上传成功
	      successHandle(res, file) {
     
	        this.dataForm.pictureAddress = file.response.path
	      },
        }
		}	
	  }
	}
</script>

2、上传到本地服务器

import java.io.File;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.*(包名).common.utils.R;
/**
 * 上传文件
 * @author ghcghdc
 *
 */
@RestController
@RequestMapping("active/upload")
public class FilesUpLoadController {
     
	@Value("${spring.servlet.multipart.location}")
	private String uploadPath;
    @Value("${server.url}")
	private String serverUrl;
    /**
     * 上传图片
     * @param file
     * @return
     * @throws Exception
     */
    @RequestMapping("/upImage")
    public R upimage(HttpServletRequest request,@RequestParam("file") MultipartFile file) throws Exception{
     
    	Date date=new Date();
    	//fordata内容
    	if(!file.isEmpty()) {
     
    		String fileName = file.getOriginalFilename();	//获取图片名字
    	    String  type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
              if (type != null) {
     
                      if ("GIF".equals(type.toUpperCase())||"PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) {
     
                    	  String imageName=date.getTime()+"."+type;
                    	  //本机小程序项目路径
                    	  file.transferTo(new File(uploadPath + File.separator + imageName));
                          return R.ok().put("path", serverUrl + "/app/files/"+imageName);
                      }
              }
    	}
		return R.error();
    }
}

R.java

import org.apache.http.HttpStatus;
import java.util.HashMap;
import java.util.Map;
/**
 * 返回数据
 *
 */
public class R extends HashMap<String, Object> {
     
	private static final long serialVersionUID = 1L;
	
	public R() {
     
		put("code", 0);
		put("msg", "success");
	}
	
	public static R error() {
     
		return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, "未知异常，请联系管理员");
	}
	
	public static R error(String msg) {
     
		return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, msg);
	}
	
	public static R error(int code, String msg) {
     
		R r = new R();
		r.put("code", code);
		r.put("msg", msg);
		return r;
	}

	public static R ok(String msg) {
     
		R r = new R();
		r.put("msg", msg);
		return r;
	}
	
	public static R ok(Map<String, Object> map) {
     
		R r = new R();
		r.putAll(map);
		return r;
	}
	
	public static R ok() {
     
		return new R();
	}

	public R put(String key, Object value) {
     
		super.put(key, value);
		return this;
	}
}