vue使用el-upload实现文件上传功能

11,838次阅读
没有评论

共计 2742 个字符,预计需要花费 7 分钟才能阅读完成。

系列文章目录


文章目录

  • 系列文章目录
  • 前言
  • 一、前台 Vue
  • 二、后台 Springboot
  • 总结

前言

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。
vue 使用 el-upload 实现文件上传功能

因为我是 vue+springboot 前后分离,要跨域,就不能用默认的 action 写请求地址,我用 axios 时最困扰的就是怎么拿到那个真实的文件,然后给传给后台。

其实可以通过自带的 onchanne 触发方法获得文件列表,文件信息中那个 raw 就是真实的文件。

写的时候,刚开始我是直接把 el-upload 里面的 button 中加了点击事件,但是每次文件还没选,就已经向后台发出请求了,当然传不过去,于是外面套了个 form。

element-ui 组件使用可以查看文档


一、前台 Vue

template>
    el-form>
       
        el-form-item label="姓名" prop="name">
            el-input v-model="name">/el-input>
        /el-form-item>
       
        el-form-item>
            el-upload ref="upfile"
                style="display: inline"
                :auto-upload="false"
                :on-change="handleChange"
                :file-list="fileList"
                action="#">
                el-button  type="success"> 选择文件 /el-button>
            /el-upload>
        /el-form-item>
        el-form-item>
            el-button  type="success" @click="upload"> 点击上传 /el-button>
        /el-form-item>
    /el-form>
    
/template>
script>
export default {
    name:'UploadUi',
    data(){
        return{
            name:'',
            fileList:[]
        }
    },
    methods:{
        
         handleChange(file, fileList) {
            this.fileList = fileList;
            console.log(fileList)
        },
        upload(){
            
            let fd = new FormData();
            fd.append("name",this.name);
            this.fileList.forEach(item=>{
                
                fd.append("files",item.raw);
                
            })
            this.$axios.post('/uploadUi',fd).then(res=>{
                if (res.data.code === 200) {
                    
                    this.$message('上传成功')
                }else{
                    this.$message('失败')
                }
            })
        },
    }
}
/script>

二、后台 Springboot

package com.example.demo.controller;
 
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.List;
 
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
 
import com.example.demo.entity.ListParam;
import com.example.demo.entity.MyUser;
import com.example.demo.entity.Result;
 
@RestController
@ResponseBody
@CrossOrigin
@RequestMapping("/api")
public class UploadController {
    
    @PostMapping("/uploadUi")
    public Result upFile(@RequestParam("name")String name,@RequestParam("files") MultipartFile[] files ) {
         System.out.println("开始");
         System.out.println(name);
         if(files != null) {
             for(MultipartFile file : files) {
                String fileName = file.getOriginalFilename();
                System.out.println(fileName);
                try{
                    File mkdir = new File("F:appfile");
                    if(!mkdir.exists()) {
                        mkdir.mkdirs();
                    }
                    
                     FileOutputStream os = new FileOutputStream(mkdir.getPath()+""+fileName);
                      InputStream in = file.getInputStream();
                      int b = 0;
                      while((b=in.read())!=-1){ 
                        os.write(b);
                      }
                      os.flush(); 
                      in.close();
                      os.close();
                      
                }catch(Exception  e) {
                    e.printStackTrace();
                    return new Result(401,"失败");
                }
            }
             return new Result(200,"成功");
         }else {
             return new Result(401,"文件找不到");
         }
        
    }
    
}

总结

以上就是本文的全部内容,希望对大家的学习有所帮助

原文地址: vue 使用 el-upload 实现文件上传功能

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-07发表,共计2742字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)