vue 之 ele上傳檔案
阿新 • • 發佈:2021-05-24
目錄
vue 之 ele上傳檔案
- 一點選選取檔案的時候,直接對接後端介面,上傳檔案,獲取返回的資料物件
- 可以刪除已上傳的檔案,也需要對接後端介面進行刪除
<template> <div class="upload_file clear_fix"> <!-- <div>uploadAllFile -- {{ uploadAllFile }}</div> --> <div class="upload_file_title">{{ title }}</div> <div class="upload_file_btn"> < !-- 這個可以不需要的 可以刪除這兩個外層的! <el-form :model="uploadForm" οnsubmit="return false"> <el-form-item label=""> --> <el-upload ref="uploadForm" action="" :file-list="fileList" :on-change="handleFileChange" :on-remove="removeFile" :auto-upload="false" multiple > <el-button size="small" type="primary" slot="trigger" >選取檔案</el-button > </el-upload> </el-form-item> </el-form> <div class="upload_file_tip"> <div>支援格式:</div> <div>jpg、png、</div> <div>docx、xlsx等</div> </div> </div> </div> </template> <script> import axios from "axios"; import { baseUrl } from "@/utils/request.js"; import { removeFileGet } from "@/api/creditManagement/singleAdd/singleAdd.js"; export default { name: "UploadFile", components: {}, data() { return { title: "上傳檔案:", fileList: [], uploadForm: {}, file: {}, // 上傳檔案 uploadAllFile: [], // 上傳的檔案的所有資料 }; }, watch: { uploadAllFile(val) { this.uploadAllFile = val; this.$emit("uploadAllFile", this.uploadAllFile); }, }, methods: { //上傳檔案,獲取檔案流 handleFileChange(file, fileList) { this.file = file.raw; // 建立表單物件 用於資料的格式 + 用於新增流檔案! let formData = new FormData(); formData.append("files", this.file); // 發起請求 對接後端介面 + 需要匯出基礎的url + Token值! axios .post(baseUrl + "/eap/uploadFile", formData, { headers: { "Content-Type": "multipart/form-data", Token: JSON.parse(sessionStorage.getItem("token")), }, }) .then(({ data }) => { // console.log("data", data.dat); if (data.code == 0) { file.buisid = data.dat[0].buisid; // 給當前檔案 新增一個id 可用於刪除檔案! this.uploadAllFile.push(data.dat[0]); this.$message({ type: "success", message: "上傳檔案成功" }); } else { this.$message({ type: "success", message: "上傳檔案失敗" }); } }); }, // 刪除檔案 removeFile(file) { // console.log("移除檔案", file); removeFileGet(file.buisid).then(({ data }) => { if (data.code == 0) { this.$message({ type: "success", message: "刪除檔案成功" }); } else { this.$message({ type: "success", message: data.dat }); } }); this.uploadAllFile = this.uploadAllFile.filter((item) => { return item.buisid != file.buisid; }); }, }, }; </script> <style lang="scss" scoped> .upload_file { position: relative; top: -10px; .upload_file_title { float: left; text-align: right; width: 110px; height: 40px; line-height: 40px; } .upload_file_btn { position: relative; float: left; } .upload_file_tip { position: absolute; top: 35px; left: 0px; width: 80px; height: 49px; div { font-size: 12px; font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; color: #b9bcc5; line-height: 14px; } } } ::v-deep .el-button--small { padding: 6px 16px !important; } ::v-deep .el-upload-list { position: relative; left: 100px; top: -34px; width: 640px; background: #000; clear: both; li { float: left; width: 33% !important; } .el-upload-list__item { margin-top: 10px !important; } } </style>