element 的上傳功能

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、萊陽(yáng)網(wǎng)站維護(hù)、網(wǎng)站推廣。

最近有個(gè)需求，需要在上傳文件前，可以進(jìn)行彈窗控制是否上傳 upload

看完文檔后，感覺有兩種思路可以實(shí)現(xiàn)

before-upload
auto-upload, on-change

before-upload

初始代碼

// template
<el-upload 
 class="avatar-uploader" 
 action="https://jsonplaceholder.typicode.com/posts/" 
 :show-file-list="false" 
 :on-success="handleAvatarSuccess" 
 :before-upload="beforeAvatarUpload">
 <img v-if="imageUrl" :src="imageUrl" class="avatar">
 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
// javscript
data() {
 return {
  imageUrl: ""
 };
 },
 methods: {
 handleAvatarSuccess(res, file) {
  this.imageUrl = URL.createObjectURL(file.raw);
 },
 beforeAvatarUpload(file) {
  // 文件類型進(jìn)行判斷 
  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;
 }
 }

分享名稱：vue中element上傳功能的實(shí)現(xiàn)思路-創(chuàng)新互聯(lián)
文章來源：http://chinadenli.net/article38/ddiipp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、小程序開發(fā)、企業(yè)建站、品牌網(wǎng)站建設(shè)、虛擬主機(jī)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)