vue中element 的upload組件發(fā)送請求給后端操作

更新時間：2020年09月07日 11:29:57 作者：瘦瘦的小芝芝

這篇文章主要介紹了vue中element 的upload組件發(fā)送請求給后端操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1.用到了before-upload屬性，

用于在上傳文件前的校驗，并且發(fā)送請求給后端，傳輸格式進行文件流傳輸

什么都不用設(shè)置，action屬性隨便設(shè)置，不能為空即可！

在before-upload屬性的方法中的代碼如下：

var _this = this;
   debugger;
   // var files=file.target.files[0];
   debugger;
   const isJPG = file.type === "image/jpeg";
   const isLt2M = file.size / 1024 / 1024 < 2;
 
   if (!isJPG) {
    this.$message.error("上傳頭像圖片只能是 JPG 格式!");
   }
   if (!isLt2M) {
    this.$message.error("上傳頭像圖片大小不能超過 2MB!");
   }
   //  return isJPG && isLt2M;
   let formData = new FormData();
   formData.append("file", file);
   axios
    .post("http://192.168.0.116:8083/pic/upload", formData)
    .then(function(response) {
     _this.enclosure.openPermitimgUrl = response.data;
     // alert(response.data);
     console.log(response);
    })
    .catch(function(error) {
     alert("上傳失敗");
     console.log(error);
    });

補充知識：vue element 實現(xiàn)上傳導(dǎo)入功能(請求到后臺接口)

1、主要用到了element中upload的onSuccess方法

action后面跟著的是上傳文件后要被導(dǎo)入的接口

data是我們可能上傳多個定義一個數(shù)組

2、在data中定義 uploadBase:{}

3、請求后臺的導(dǎo)入接口傳給后臺所需要的參數(shù)

以上這篇vue中element 的upload組件發(fā)送請求給后端操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于vue1和vue2獲取dom元素的方法
下面小編就為大家分享一篇基于vue1和vue2獲取dom元素的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue實現(xiàn)打印功能的示例代碼
這篇文章主要為大家詳細介紹了如何通過vue實現(xiàn)打印功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12
vue實現(xiàn)表單未編輯或未保存離開彈窗提示功能
這篇文章主要介紹了vue實現(xiàn)表單未編輯或未保存離開彈窗提示功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
vue3使用elementPlus進行table合并處理的示例詳解
虛擬數(shù)據(jù)中公司下有多個客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進行展示,所以本文給大家介紹了vue3使用elementPlus進行table合并處理的實例,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2024-02-02
關(guān)于element?ui的菜單default-active默認選中的問題
這篇文章主要介紹了關(guān)于element?ui的菜單default-active默認選中的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue3中實現(xiàn)網(wǎng)頁時鐘功能(顯示當前時間并每秒更新一次)
本文將詳細介紹如何在Vue3中實現(xiàn)一個每秒鐘自動更新的網(wǎng)頁時鐘,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-07-07
Vue設(shè)置提示和警告彈出框?qū)崙?zhàn)案例
頁面中會有很多時候需要彈窗提示,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置提示和警告彈出框的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-02-02
解決vite打包后白屏之router-view不生效問題
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue打印功能實現(xiàn)的兩種方法總結(jié)
在項目中,有時需要打印頁面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下
2021-06-06
解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題
今天小編就為大家分享一篇解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08