element-ui配合node實現(xiàn)自定義上傳文件方式
element-ui配合node實現(xiàn)自定義上傳文件
某些情況下,使用element-ui的upload組件默認上傳無法滿足我們的需求,so~今天主要介紹如何使用element-ui實現(xiàn)自定義上傳,以及后端如何接收上傳的文件信息和其他信息,根據(jù)element-ui文檔,http-request可以自定義上傳方法,會覆蓋掉默認的上傳。
首先我們來看前端代碼:
<template> ? <div style="margin-top:100px"> ? ? <el-form :model="form"> ? ? ? <el-form-item label="姓名" label-width="50px"> ? ? ? ? <el-input v-model="form.name"></el-input> ? ? ? </el-form-item> ? ? ? <el-form-item label="年齡" label-width="50px"> ? ? ? ? <el-input v-model="form.age"></el-input> ? ? ? </el-form-item> ? ? ? <el-form-item label="文件" label-width="50px"> ? ? ? ? <el-upload? ? ? ? ? ? class="upload-demo"? ? ? ? ? ? :auto-upload="false"? ? ? ? ? ? :limit="1"? ? ? ? ? ? ref="upload" ? ? ? ? ? :http-request="upload" ? ? ? ? ? multiple> ? ? ? ? ? <!-- :http-request="upload" --> ? ? ? ? ? <el-button size="small" type="primary">點擊上傳</el-button> ? ? ? ? ? <div slot="tip" class="el-upload__tip">只能上傳pdf文件</div> ? ? ? ? </el-upload> ? ? ? </el-form-item> ? ? </el-form> ? ?? ? ? <el-button type="primary" @click="upload">確定</el-button> ? </div> </template>
<script> ? export default{ ? ? name: 'upload', ? ? data() { ? ? ? return { ? ? ? ? form: { ? ? ? ? ? name: '', ? ? ? ? ? age: '' ? ? ? ? } ? ? ? } ? ? }, ? ? methods: { ? ? ? upload() { ? ? ? ? const formData = new FormData(); ? ? ? ? const file = this.$refs.upload.uploadFiles[0]; ? ? ? ? const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' } }; ? ? ? ? if (!file) { // 若未選擇文件 ? ? ? ? ? alert('請選擇文件'); ? ? ? ? ? return; ? ? ? ? } ? ? ? ? formData.append('file', file.raw); ? ? ? ? formData.append('name', this.name); ? ? ? ? formData.append('age', this.age); ? ? ? ? this.$http.post('/api/upload', formData, headerConfig).then(res => { ? ? ? ? ? console.log(res); ? ? ? ? }) ? ? ? } ? ? } ? } </script>
由于是上傳文件,所以我們需要配置下axios請求header的Content-Type為'multipart/form-data',this.$refs.upload.uploadFiles[0].raw即為我們選擇的文件,name和age則為其他要傳的信息。
接著,我們來看后端如何獲取,這里以node為例:
我們需要安裝multer中間件,npm install multer -S即可,接下來我們來看如何使用multer。
首先引入multer:
var express = require('express'); var multer = require('multer') const upload = multer({ dest: 'uploads/' }); ? var app = express(); app.use(upload.single('file')); // ? app.post('/api/upload', (req, res)=>{ ? console.log(req.body);//獲取到的age和name ? console.log(req.file);//獲取到的文件 ? ? //做些其他事情 })
整個過程下來,就完成了圖片的上傳,非常簡單。
關(guān)于multer的用法:https://www.npmjs.com/package/multer
自定義elementui上傳文件及攜帶參數(shù)
elementui提供了上傳文件的ui,可以比較方便,我們需要它來完成自定義上傳文件以及攜帶參數(shù)需要改寫其中的一些方法來實現(xiàn)。
下面是一個簡單的上傳標簽
? ? <el-upload ? ? ? ? ref="upload" ? ? ? ? style="display: inline" ? ? ? ? drag ? ? ? ? action="" ? ? ? ? :before-upload="beforeUploadHandle" ? ? ? ? :http-request="handleUploadForm" ? ? ? ? :auto-upload="false" ? ? ? ? multiple ? ? ? ? :limit="1" ? ? ? ? :on-exceed="handleExceed"> ? ? ? <el-link icon="el-icon-paperclip" type="primary">添加需要上傳的文件</el-link> ? ? </el-upload>
不自動上傳
:auto-upload=“false”
限制上傳文件個數(shù)
:limit=“1”
上傳之前的校驗
我們需要實現(xiàn)這個方法,來檢測上傳的合法性
:before-upload=“beforeUploadHandle”
上傳時需要攜帶參數(shù)
需要上傳的數(shù)據(jù)文件以及參數(shù)在這里來處理添加
:http-request=“handleUploadForm”
檢測添加文件是否超過限制
:on-exceed=“handleExceed”
手動上傳
其中的upload對應(yīng)于上面的ref=“upload”,我們只需要給按鈕實現(xiàn)一個方法執(zhí)行此語句便可以實現(xiàn)自己點擊上傳
this.$refs.upload.submit();
具體實現(xiàn)
上傳限制以及上傳之前的校驗不贅述,這里給出一個簡單的demo。上傳限制實現(xiàn)類似,只是給出一些提示信息,file便是我們上傳的文件。
beforeUploadHandle(file) { if ( file.type !== "image/png" && file.type !== "image/jpeg" ) { this.$message.error("只支持.jpg、.jpeg、.jpe、.png文件!"); return false; } },
攜帶參數(shù)
handleUploadForm(param) { console.log(this.pid) let thisInfo = this let formData = new FormData() // 在formData中加入我們需要的參數(shù) formData.append('file', param.file) formData.append('id', this.pid) // 向后端發(fā)送數(shù)據(jù) thisInfo.$axios.post('api/user/update_Info/', formData).then((res) => { if (res.status === 200) { thisInfo.$message.success('修改信息成功') } else { thisInfo.$message.success('修改信息失敗') } thisInfo.formFileList = [] thisInfo.uploadFormFileList = [] }) }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊思路詳解
這篇文章主要介紹了Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊,實現(xiàn)思路大概是通過加一個本地緩存的時間戳,通過時間戳計算指定時間內(nèi)不能點擊按鈕,具體實現(xiàn)代碼跟隨小編一起看看吧2023-12-12vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06