vue+springboot文件上传以及开发中的一些小问题处理

vue+springboot文件上传以及开发中的一些小问题处理

写在前面：有好几天没写文章了，感觉不写点啥心里有点不踏实。现在是凌晨多了，听着李志老师的《你离开了南京，从此没有人和我说话》，讲真，很惬意。好了，不花里胡哨了。

前端：

我今天看了两个框架的文件上传，一个是elementui，另一个是我项目用到的vantui，elementui是有个auto-upload属性的，就是只要我们把action（是文件上传的地址）写好了，我们就不用再自己封装axios去请求后台了，后台返回参数我们怎么去获取呢？它是有个on-change（文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用）的，所以会监听上传成功后我们可以去获得response的。但是vant是没有的，我们只有自己去封装axios，但是我们在何时去请求后台呢？vant也有钩子，是after-read。下面我就贴出代码。

<van-uploader :after-read="onRead" :before-read="beforeRead" accept="image/*" multiple preview-image>    
    <img  class="applyProxy_sfzbgzm" ref="sfzImg1"/>
</van-uploader>

async onRead(file) {   
    const data =await upLoaderImg(file);                 this.idCardImg1=data.message;  
    this.$refs.sfzImg1.src = file.content;
}

注意这里要加上异步。

//upLoaderImg.js
import axios from "axios";    
//引入axios
import { Toast } from "vant"; 
//引入Toast
import { UPLOADER } from "@/api/common";
function upLoaderImg (file) {  
    //file为 你读取成功的回调文件信息 
    //new 一个FormData格式的参数   
    let params = new FormData();                         params.append("file", file.file);    
    let config = {       
        headers: { 
            //添加请求头           
            "Content-Type": "multipart/form-data"                        }   
    };    
    return new Promise((resolve, reject) => {               //把 uploadUrl 换成自己的 上传路径                    axios.post(UPLOADER, params, config).then(res           => {           
        if (res && res.data && res.data.success) {           //如果为真 resolve出去              
          resolve(res.data);         
        } else {               
            //否则 Toast 提示                               Toast.fail("文件上传失败！");                              reject(res.data);        
        }        })
        .catch(err => {         
        Toast.fail("系统异常");                                  reject(err);    
                    });   
            });}
            
            export default upLoaderImg;

后端：

@PostMapping(value = "/upload")public Result<?> upload(HttpServletRequest request, HttpServletResponse response) {   Result<?> result = new Result<>();   try {      String ctxPath = uploadpath;      String fileName = null;      String bizPath = "files";      String nowday = new SimpleDateFormat("yyyyMMdd").format(new Date());      File file = new File(ctxPath + File.separator + bizPath + File.separator + nowday);      if (!file.exists()) {      
    file.mkdirs();
    // 创建文件根目录    
}     
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;      MultipartFile mf = multipartRequest.getFile("file");
// 获取上传文件对象      
String orgName = mf.getOriginalFilename();
// 获取文件名      
fileName = orgName.substring(0, orgName.lastIndexOf(".")) + "_" + System.currentTimeMillis() + orgName.substring(orgName.indexOf("."));      String savePath = file.getPath() + File.separator + fileName;      File savefile = new File(savePath);      FileCopyUtils.copy(mf.getBytes(), savefile);      String dbpath = bizPath + File.separator + nowday + File.separator + fileName;      if (dbpath.contains("\\")) {         dbpath = dbpath.replace("\\", "/");      }      result.setMessage(dbpath);      result.setSuccess(true);   } catch (IOException e) {      result.setSuccess(false);      result.setMessage(e.getMessage());      log.error(e.getMessage(), e);   }   return result;}

就这样。