欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui配合node實現(xiàn)自定義上傳文件方式

 更新時間:2022年09月07日 08:57:20   作者:機智的趙先生  
這篇文章主要介紹了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中的事件修飾符介紹和示例

    vue中的事件修飾符介紹和示例

    在Vue中,修飾符處理了許多DOM事件的細節(jié),讓我們不再需要花大量的時間去處理這些煩惱的事情,而能有更多的精力專注于程序的邏輯處理,需要的朋友可以參考下
    2023-04-04
  • vue登錄路由權(quán)限管理的項目實踐

    vue登錄路由權(quán)限管理的項目實踐

    在開發(fā)Web應(yīng)用程序時,常常需要進行登錄驗證和權(quán)限管理,本文主要介紹了vue登錄路由權(quán)限管理的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊思路詳解

    Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊思路詳解

    這篇文章主要介紹了Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊,實現(xiàn)思路大概是通過加一個本地緩存的時間戳,通過時間戳計算指定時間內(nèi)不能點擊按鈕,具體實現(xiàn)代碼跟隨小編一起看看吧
    2023-12-12
  • vue的路由動畫切換頁面無法讀取meta值的bug記錄

    vue的路由動畫切換頁面無法讀取meta值的bug記錄

    這篇文章主要介紹了vue的路由動畫切換頁面無法讀取meta值的bug記錄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo

    vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo

    這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • 關(guān)于vue-tree-chart簡單的使用

    關(guān)于vue-tree-chart簡單的使用

    這篇文章主要介紹了關(guān)于vue-tree-chart簡單的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 淺談Vue中render中的h箭頭函數(shù)

    淺談Vue中render中的h箭頭函數(shù)

    今天小編就為大家分享一篇淺談Vue中render中的h箭頭函數(shù),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 詳解在Vue中通過自定義指令獲取dom元素

    詳解在Vue中通過自定義指令獲取dom元素

    本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ,具有一定的參考價值,有興趣的可以了解一下。
    2017-03-03
  • vue項目調(diào)試的三種方法總結(jié)

    vue項目調(diào)試的三種方法總結(jié)

    這篇文章主要給大家總結(jié)介紹了關(guān)于vue項目調(diào)試的三種方法,大家可以根據(jù)需要選擇調(diào)試方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-09-09
  • 關(guān)于怎么在vue項目里寫react詳情

    關(guān)于怎么在vue項目里寫react詳情

    本篇文章是在vue項目里寫tsx的一篇介紹。其實vue里面寫jsx也挺有意思的,接下來小編九給大家詳細介紹吧,感興趣的小伙伴請參考下面的文章內(nèi)容
    2021-09-09

最新評論