vue中使用element 的upload組件如何實(shí)現(xiàn)發(fā)送請(qǐng)求給后端

發(fā)布時(shí)間：2020-11-04 17:10:29 來(lái)源：億速云閱讀：687 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

vue中使用element 的upload組件如何實(shí)現(xiàn)發(fā)送請(qǐng)求給后端？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

1.用到了before-upload屬性，

用于在上傳文件前的校驗(yàn)，并且發(fā)送請(qǐng)求給后端，傳輸格式進(jìn)行文件流傳輸

什么都不用設(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("上傳頭像圖片大小不能超過(guò) 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);
    });

補(bǔ)充知識(shí)：vue element 實(shí)現(xiàn)上傳導(dǎo)入功能(請(qǐng)求到后臺(tái)接口)

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

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

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

vue中使用element 的upload組件如何實(shí)現(xiàn)發(fā)送請(qǐng)求給后端

2、在data中定義 uploadBase:{}

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

vue中使用element 的upload組件如何實(shí)現(xiàn)發(fā)送請(qǐng)求給后端

關(guān)于vue中使用element 的upload組件如何實(shí)現(xiàn)發(fā)送請(qǐng)求給后端問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問(wèn)一下細(xì)節(jié)

vue中使用element 的upload組件如何實(shí)現(xiàn)發(fā)送請(qǐng)求給后端

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽