vue使用el-upload實現(xiàn)文件上傳的實例代碼

更新時間：2024年01月03日 11:20:39 作者：數(shù)據(jù)大魔王

這篇文章主要為大家詳細介紹了vue使用el-upload實現(xiàn)文件上傳,文中示例代碼介紹的非常詳細,對大家的學習或工作有一定的幫助,感興趣的小伙伴們可以參考一下

引言

因為我是vue+springboot前后分離，要跨域，就不能用默認的action寫請求地址，我用axios時最困擾的就是怎么拿到那個真實的文件，然后給傳給后臺。

其實可以通過自帶的onchanne觸發(fā)方法獲得文件列表，文件信息中那個raw就是真實的文件。

寫的時候，剛開始我是直接把el-upload里面的button中加了點擊事件，但是每次文件還沒選，就已經向后臺發(fā)出請求了，當然傳不過去，于是外面套了個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:{
        //通過onchanne觸發(fā)方法獲得文件列表
         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

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,"文件找不到");
         }
        
    }
    
}