vue使用el-upload實現(xiàn)文件上傳功能

更新時間：2022年04月21日 16:34:37 作者：潯者

這篇文章主要為大家詳細介紹了vue使用el-upload實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

寫的時候，剛開始我是直接把el-upload里面的button中加了點擊事件，但是每次文件還沒選，就已經(jīng)向后臺發(fā)出請求了，當然傳不過去，于是外面套了個form。

element-ui組件使用可以查看文檔

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"
? ? ? ? ? ? ? ? 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后臺 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(); //關(guān)閉流?
?? ??? ??? ??? ? ? ? ?in.close();
?? ??? ??? ??? ? ? ? ?os.close();
?? ??? ??? ??? ? ? ? ?
?? ??? ??? ??? ?}catch(Exception ?e) {
?? ??? ??? ??? ??? ?e.printStackTrace();
?? ??? ??? ??? ??? ?return new Result(401,"失敗");
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ? return new Result(200,"成功");
?? ??? ? }else {
?? ??? ??? ? return new Result(401,"文件找不到");
?? ??? ? }
?? ??? ?
?? ?}
?? ?
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: