vue如何使用Element el-upload組件

本篇內(nèi)容介紹了“vue如何使用Element el-upload組件”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

目錄

• 一、基本使用

• 二、圖片數(shù)量控制

• 三、圖片格式限制/可以選中多張圖片

• 補(bǔ)充：在vue項(xiàng)目中使用element-ui的Upload上傳組件

一、基本使用

最近研究了一下 el-upload組件 踩了一些小坑  寫起來(lái)大家學(xué)習(xí)一下

很經(jīng)常的一件事情 經(jīng)常會(huì)去直接拷貝 element的的組件去使用 但是用到上傳組件時(shí) 就會(huì)遇到坑了

如果你直接去使用upload 你肯定會(huì)遇見這個(gè)錯(cuò)誤

 而且 上傳的圖片 可能會(huì)突然消失  這時(shí)候如果你沒有接口  你是完全不知道為什么移除的  所以 無(wú)接口時(shí) 只能去猜測(cè)是不是因?yàn)榭缬驁?bào)錯(cuò) 導(dǎo)致圖片消失

最終去拿公司的地址調(diào)完接口，答案是對(duì)的 action="https://jsonplaceholder.typicode.com/posts/"  這是element中的action參數(shù)  用html 時(shí) 他會(huì)去調(diào)用ajax 使同源策略不同導(dǎo)致報(bào)錯(cuò)。

一般呢公司都會(huì)提供一個(gè) 轉(zhuǎn)圖片為url格式的地址鏈接 你只需要去調(diào)用它 保存下來(lái)就好了， 但是可能會(huì)遇到需要token 權(quán)限 ，這時(shí)候很少去做的事情來(lái)了，一般沒有去直接通過(guò)組件帶token，所以要通過(guò) el-upload組件去攜帶token

 <el-upload
            action="https://xxxx地址"
            :headers="importHeaders"
          >
   </el-upload>
 
import {getToken} from '@/utils/token'
 
 
data() {
    return {
      importHeaders: {token: getToken()},
    };
  },

二、圖片數(shù)量控制

 <el-upload
            action="https://security.brofirst.cn/api/common/upload"
            :headers="importHeaders"
            :limit="limit"
             :on-exceed="masterFileMax"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
 
 
 
  // 最多上傳幾張圖片
    masterFileMax(files, fileList) {
        console.log(files, fileList);
        this.$message.warning(`請(qǐng)最多上傳 ${this.limit} 個(gè)文件。`);
    },

三、圖片格式限制/可以選中多張圖片

  <el-upload
             accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
             multiple
          >
            <i class="el-icon-plus"></i>
          </el-upload>

例子

   <el-upload
            action="https://xxxx"
            :headers="importHeaders"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :limit="limit"
             :on-exceed="masterFileMax"
             accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
             multiple
          >
            <i class="el-icon-plus"></i>
          </el-upload>
 
 
 
<script>
import {getToken} from '@/utils/token'
export default {
  name:'feedback',
  data() {
    return {
      importHeaders: {token: getToken()},
       images:[],
      limit:9
    };
  },
  methods: {
  //刪除圖片
    handleRemove(file, fileList) {
     const idx= this.images.findIndex(it=>it===file.response.data.fullurl)
     this.images.splice(idx,1)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上傳成功后的數(shù)據(jù)
    handleAvatarSuccess(response, file, fileList){
      console.log(response, file, fileList);
      if(response.code===1){
        this.images.push(response.data.fullurl)
      }
    },
    // 最多上傳幾張圖片
    masterFileMax(files, fileList) {
        console.log(files, fileList);
        this.$message.warning(`請(qǐng)最多上傳 ${this.limit} 個(gè)文件。`);
    }
  }
};
</script>

補(bǔ)充：在vue項(xiàng)目中使用element-ui的Upload上傳組件

<el-upload
               v-else
               class='ensure ensureButt'
               :action="importFileUrl"
               :data="upLoadData"
               name="importfile"
               :onError="uploadError"
               :onSuccess="uploadSuccess"
               :beforeUpload="beforeAvatarUpload"
               >
               <el-button size="small" type="primary">確定</el-button>

其中importFileUrl是后臺(tái)接口，upLoadData是上傳文件時(shí)要上傳的額外參數(shù)，uploadError是上傳文件失敗時(shí)的回掉函數(shù)，uploadSuccess是文件上傳成功時(shí)的回掉函數(shù)，beforeAvatarUpload是在上傳文件之前調(diào)用的函數(shù)，我們可以在這里進(jìn)行文件類型的判斷。

data () {
    importFileUrl: 'http:dtc.com/cpy/add',
    upLoadData: {
        cpyId: '123456', 
        occurTime: '2017-08'
    }
},
methods: {
    // 上傳成功后的回調(diào)
    uploadSuccess (response, file, fileList) {
      console.log('上傳文件', response)
    },
    // 上傳錯(cuò)誤
    uploadError (response, file, fileList) {
      console.log('上傳失敗，請(qǐng)重試！')
    },
    // 上傳前對(duì)文件的大小的判斷
    beforeAvatarUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const extension3 = file.name.split('.')[1] === 'doc'
      const extension4 = file.name.split('.')[1] === 'docx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2 && !extension3 && !extension4) {
        console.log('上傳模板只能是 xls、xlsx、doc、docx 格式!')
      }
      if (!isLt2M) {
        console.log('上傳模板大小不能超過(guò) 10MB!')
      }
      return extension || extension2 || extension3 || extension4 && isLt2M
    }
}

“vue如何使用Element el-upload組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！