vue实现上传文件_vue工程如何打包部署运行

大家好，又见面了，我是你们的朋友全栈君。

SpringMVC vue实现文件上传

• 后台
• 前端

异步上传（后端springmvc加前端vue）

后台

采用springmvc，实现获取到相对路径和绝对路径存储为json传到前端作为新增到数据库里的数据

代码语言：javascript复制

//文件上传
    @PostMapping(value = "/upLoading")
    @ResponseBody
    public Result<HashMap<String,String>> upLoading(MultipartFile file,HttpServletRequest request){ 
   
        System.out.println("进入文件上传");
        //定义要返回的绝对路径和相对路径
        String absolutePath=null;
        String relativePath=null;

        Result<HashMap<String,String>> result = new Result<HashMap<String,String>>();
        //获得服务器所在路径
        String path = request.getSession().getServletContext().getRealPath("/") file.getOriginalFilename();
        //获得上传文件的文件名
        String fileName=file.getOriginalFilename();
        System.out.println(fileName);
        //xxxxx.xxx
        //UUID.randomUUID()
        //UUID:随机生成一段字符串，16-18位由字母加数字拼接而成，保证10年不重复
        fileName = UUID.randomUUID() fileName.substring(fileName.lastIndexOf("."));
        System.out.println(fileName);
        //设置绝对路径和文件存储路劲
        absolutePath = "D:\ideaProjects\SSMApp\src\main\web\statics\uploadfiles\" fileName;
        //设置相对文件路径
        relativePath="statics\uploadfiles\" fileName;
        System.out.println(path);
        HashMap<String ,String> map=new HashMap<String, String>();
        map.put("absolutePath",absolutePath);
        map.put("relativePath",relativePath);
        //保存文件
        try { 
   
            file.transferTo(new File(absolutePath));
            result.setResult(map);
            result.setMessage("文件上传成功");
        }catch (Exception exce){ 
   
            result.setMessage("文件上传失败：" exce.getMessage());
            result.setSuccess(false);
            System.out.println(exce.getMessage());
        }
        return result;
    }

前端

部分前端（重要实现前端部分）

代码语言：javascript复制

<div class="item form-group"><!--for="name"-->
            <label class="control-label col-md-3 col-sm-3 col-xs-12" >LOGO图片 <span class="required">*</span>
            </label>
            <div class="col-md-6 col-sm-6 col-xs-12"><!--type="file" -->
            <input type="file" @change="upLoading($event)" v-model="params.file" class="form-control col-md-7 col-xs-12" name="logoPicPath" required="file" id="logoPicPath" accept="jpg,jpeg,png"/>
              <span style="display: none" v-model="params.logoPicPath">
              <span style="display: none" v-model="params.logoLocPath">
              <span class="add-file-right-more">支持扩展名：jpg,jpeg,png</span>
              ${fileUploadError }
            </div>
          </div>

代码语言：javascript复制

<script> new Vue({ 
     params:{ 
     logoPicPath:"", //相对路径 logoLocPath:"" //绝对路径 } }), methods:{ 
     //文件上传 upLoading(even){ 
     this.params.file=even.target.files[0]; console.log(this.params.file.name) console.log("进入文件上传") var forms = new FormData() forms.append("file",this.params.file,this.params.file.name); var configs = { 
     headers: { 
     "Content-Type": "multipart/form-data" } }; console.log(this.params.file); axios.post("/dev/upLoading",forms ,configs).then(res=>{ 
     console.log(res) this.params.logoPicPath=res.data.result.relativePath; this.params.logoLocPath=res.data.result.absolutePath; //绝对 console.log(res) }) } } </script>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170639.html原文链接：https://javaforall.cn

https java 网络安全 spring mvc

0 人点赞