本文主要介紹了elementUI中使用formdata進(jìn)行上傳文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在使用elementUI文檔的時(shí)候，上傳圖片的組件，使用了formdata的方式，第一次使用，在此記錄一下。根據(jù)文檔，就是在上傳的時(shí)候，有一個(gè)上傳圖片的接口，點(diǎn)擊上傳之后會(huì)返回給你一個(gè)網(wǎng)絡(luò)路徑，再將網(wǎng)絡(luò)路徑跟表單的其他的信息通過提交接口，提交到后臺(tái)即可。

在這里插入圖片描述

一、el-upload中的相關(guān)參數(shù)

<!--上傳圖片-->
          <el-upload
            ref="upload"
            :headers="headers"
            class="upload-demo"
            :class="showUpload === true ? 'show-upload-pic' : ''"
            :limit="5"
            :action="uploadUrl"
            :data="data"
            :file-list="fileList"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="changeBigImg"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <!--上傳圖片-->

①action必選參數(shù)

action:必選參數(shù)，上傳的地址

//上傳的地址，可以根據(jù)不同的環(huán)境配置不同的跳轉(zhuǎn)地址
created() {
    if (process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development") {
      this.uploadUrl = 'https://test.../common/upload_files';
    } else if (process.env.NODE_ENV === "production") {
      this.uploadUrl = 'https://operate.../common/upload_files';
    }
  },

②http-request實(shí)現(xiàn)自定義上傳
但是，如果后臺(tái)只給你一個(gè)接口，讓你通過formdata來提交。通過查看api發(fā)現(xiàn)，還有個(gè)方法可以實(shí)現(xiàn)自定義上傳。

http-request:覆蓋默認(rèn)的上傳行為，可以自定義上傳的實(shí)現(xiàn)。

用這個(gè)方法之前，我們還要將auto-upload設(shè)置成false.

auto-upload:是否在選取文件后立即進(jìn)行上傳

③headers設(shè)置上傳的請(qǐng)求頭部

headers:設(shè)置上傳的請(qǐng)求頭部

<script>
//可以添加請(qǐng)求的token
import { getToken } from '@/utils/auth'
export default{
	data(){
		return{
			headers:{
				authorization: getToken()
			},
			 data: {
        		projectCode: '',
        		projectVer: '',
        		imageBits: ''
      		},
      		fileList: [],
		}
	},
}
</script>

import Cookies from 'js-cookie'

const TokenKey = 'token'

export function getToken() {
  return Cookies.get(TokenKey)
}

④on-preview點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子

on-preview:點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子

handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogUpload = true;
},

⑤on-remove文件列表移除文件時(shí)的鉤子

// 刪除文件時(shí)，將相關(guān)參數(shù)清空，進(jìn)行處理操作
    handleRemove(file, fileList, response) {
      this.saveParam.urls = '';

      for (let i = 0; i < this.imgArrs.length; i++) {
        if (file.response) {
          if (this.imgArrs[i] === file.response.data[0].imgUrl) {
            this.imgArrs.splice(i, 1);
          }
        } else {
          if (this.imgArrs[i] === file.url) {
            this.imgArrs.splice(i, 1);
          }
        }
      }
      const result = this.imgList.split(",");

      for (let i = 0; i < result.length; i++) {
        if (file.response) {
          if (result[i] === file.response.data[0].imgUrl) {
            result.splice(i, 1);
          }
        } else {
          if (result[i] === file.url) {
            result.splice(i, 1);
          }
        }
      }

      this.imgListCopy = ''; // 重新賦值
      for (let i = 0; i < result.length; i++) {
        this.imgList += result[i] + ",";
        if (result[i] !== '') {
          this.imgListCopy += result[i] + ",";
        }
      }
      this.imgList = this.imgListCopy;

      if (fileList.length < 5) {
        this.showUpload = false;
      }
    },

⑥on-success文件上傳成功時(shí)的鉤子

on-success:文件上傳成功時(shí)的鉤子

//在文件上傳成功時(shí)，將相關(guān)參數(shù)進(jìn)行賦值操作
handleAvatarSuccess(res, fileList) {
      let imgArr = '';

      imgArr = res.data[0].imgUrl;
      this.imgList += imgArr + ",";

      this.imgArrs.push(imgArr);
      if (this.imgArrs.length > 4) {
        this.showUpload = true;
      } else {
        this.showUpload = false;
      }
    },

圖片展示：

在這里插入圖片描述

調(diào)用接口的情況：

在這里插入圖片描述

⑦on-change文件狀態(tài)改變時(shí)的鉤子，添加文件、上傳成功和上傳失敗時(shí)都會(huì)被調(diào)用

on-change:文件狀態(tài)改變時(shí)的鉤子，添加文件、上傳成功和上傳失敗時(shí)都會(huì)被調(diào)用

// 上傳圖片的驗(yàn)證
changeBigImg(file, fileList) {
   this.bigFileList = fileList
   this.bigFile = file
}

二、擴(kuò)展–如何在上傳超過5張圖片后，隱藏上傳按鈕

通過查看代碼，發(fā)現(xiàn)上傳按鈕，是通過.el-upload–picture-card標(biāo)簽進(jìn)行控制的，那么是不是可以在照片數(shù)量達(dá)到上限時(shí)，通過display: none;來控制顯示和隱藏呢？直接對(duì)el-upload–picture-card不好控制，那么就通過判斷數(shù)量，加上動(dòng)態(tài)類名來控制。

<style>
.show-upload-pic .el-upload--picture-card {
  display: none;
}
</style>

if (fileList.length < 5) {
    this.showUpload = false;
}

if (this.imgArrs.length > 4) {
    this.showUpload = true;
} else {
    this.showUpload = false;
}

if (this.fileList.length >= 5) {
    this.showUpload = true;
} else {
    this.showUpload = false;
}

參考博客：

elementUI 上傳文件使用formdata
elementUI

到此這篇關(guān)于elementUI中使用formdata進(jìn)行上傳文件的文章就介紹到這了,更多相關(guān)elementUI中使用formdata進(jìn)行上傳文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: