首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vue实现上传文件_vue工程如何打包部署运行

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

作者头像
全栈程序员站长
发布2022-09-22 20:42:15
发布2022-09-22 20:42:15
6520
举报

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • SpringMVC+vue实现文件上传
  • 后台
  • 前端
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档