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

这篇文章主要介绍了Vue怎么使用el-upload实现文件上传功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么使用el-upload实现文件上传功能文章都会有所收获，下面我们一起来看看吧。

upload.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"                                :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:{        //通过onchanne触发方法获得文件列表         handleChange(file, fileList) {            this.fileList = fileList;            console.log(fileList)        },        upload(){                        let fd = new FormData();            fd.append("name",this.name);            this.fileList.forEach(item=>{                //文件信息中raw才是真的文件                fd.append("files",item.raw);                //console.log(item.raw)            })            this.$axiOS.post('/uploadUi',fd).then(res=>{                if (res.data.code === 200) {                    //console.log(res);                    this.$message('上传成功')                }else{                    this.$message('失败')                }            })        },    }}</script>

springboot后台 uploadController.java

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:\\app\\file");                    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实现文件上传功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue怎么使用el-upload实现文件上传功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。