Vue封裝一個(gè)簡單輕量的上傳文件組件的示例-創(chuàng)新互聯(lián)

一、之前遇到的一些問題

十載的蘭山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整蘭山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“蘭山網(wǎng)站設(shè)計(jì)”,“蘭山網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

項(xiàng)目中多出有上傳文件的需求，使用現(xiàn)有的UI框架實(shí)現(xiàn)的過程中，不知道什么原因，總會(huì)有一些莫名其妙的bug。比如用某上傳組件，明明注明（:multiple="false"）,可實(shí)際上還是能多選，上傳的時(shí)候依然發(fā)送了多個(gè)文件；又比如只要加上了（:file-list="fileList"）屬性，希望能手動(dòng)控制上傳列表的時(shí)候，上傳事件this.refs.[upload（組件ref）].submit()就不起作用了，傳不了。總之，懶得再看它怎么實(shí)現(xiàn)了，我用的是功能，界面本身還是要重寫的，如果堅(jiān)持用也會(huì)使項(xiàng)目多很多不必要的邏輯、樣式代碼……

之前用Vue做項(xiàng)目用的視圖框架有element-ui，團(tuán)隊(duì)內(nèi)部作為補(bǔ)充的zp-ui，以及iview?？蚣苁呛糜?，但是針對(duì)自己的項(xiàng)目往往不能全部拿來用，尤其是我們的設(shè)計(jì)妹子出的界面與現(xiàn)有框架差異很大，改源碼效率低又容易導(dǎo)致未知的bug，于是自己就抽時(shí)間封裝了這個(gè)上傳組件。

二、代碼與介紹

父組件

<template>
 <div class="content">
 <label for="my-upload">
  <span>上傳</span>
 </label>
  <my-upload
   ref="myUpload"
   :file-list="fileList"
   action="/uploadPicture"
   :data="param"
   :on-change="onChange"
   :on-progress="uploadProgress"
   :on-success="uploadSuccess"
   :on-failed="uploadFailed"
   multiple
   :limit="5"
   :on-finished="onFinished">
  </my-upload>
  <button @click="upload" class="btn btn-xs btn-primary">Upload</button>
 </div>
</template>

<script>
import myUpload from './components/my-upload'
export default {
 name: 'test',
 data(){
  return {
  fileList: [],//上傳文件列表，無論單選還是支持多選，文件都以列表格式保存
  param: {param1: '', param2: '' },//攜帶參數(shù)列表
  }
 },
 methods: {
  onChange(fileList){//監(jiān)聽文件變化，增減文件時(shí)都會(huì)被子組件調(diào)用
  this.fileList = [...fileList];
  },
  uploadSuccess(index, response){//某個(gè)文件上傳成功都會(huì)執(zhí)行該方法，index代表列表中第index個(gè)文件
  console.log(index, response);
  },
  upload(){//觸發(fā)子組件的上傳方法
  this.$refs.myUpload.submit();
  },
  removeFile(index){//移除某文件
  this.$refs.myUpload.remove(index);
  },
  uploadProgress(index, progress){//上傳進(jìn)度，上傳時(shí)會(huì)不斷被觸發(fā)，需要進(jìn)度指示時(shí)會(huì)很有用
  const{ percent } = progress;
  console.log(index, percent);
  },
  uploadFailed(index, err){//某文件上傳失敗會(huì)執(zhí)行，index代表列表中第index個(gè)文件
  console.log(index, err);
  },
  onFinished(result){//所有文件上傳完畢后（無論成?。﹫?zhí)行，result: { success: 成功數(shù)目, failed: 失敗數(shù)目 }
  console.log(result);
  }
 },
 components: {
  myUpload
 }
}
</script>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：Vue封裝一個(gè)簡單輕量的上傳文件組件的示例-創(chuàng)新互聯(lián)
文章URL：http://www.muchs.cn/article6/dsjeig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、App設(shè)計(jì)、面包屑導(dǎo)航、微信公眾號(hào)、自適應(yīng)網(wǎng)站、營銷型網(wǎng)站建設(shè)

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

猜你還喜歡下面的內(nèi)容