在vue項目中使用element-ui的Upload上傳組件的樣本，vueelement-ui

在vue項目中使用element-ui的Upload上傳組件的樣本，vueelement-ui

本文介紹了vue項目中使用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是後台介面，upLoadData是上傳檔案時要上傳的額外參數，uploadError是上傳檔案失敗時的回掉函數，uploadSuccess是檔案上傳成功時的回掉函數，beforeAvatarUpload是在上傳檔案之前調用的函數，我們可以在這裡進行檔案類型的判斷。

data () {  importFileUrl: 'http:dtc.com/cpy/add',  upLoadData: {    cpyId: '123456',     occurTime: '2017-08'  }},methods: {  // 上傳成功後的回調  uploadSuccess (response, file, fileList) {   console.log('上傳檔案', response)  },  // 上傳錯誤  uploadError (response, file, fileList) {   console.log('上傳失敗，請重試！')  },  // 上傳前對檔案的大小的判斷  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('上傳模板大小不能超過 10MB!')   }   return extension || extension2 || extension3 || extension4 && isLt2M  }}

最近在適用VUE作為前端架構做自己的項目，在做到需要上傳檔案到伺服器時，同事告訴我upload之中的action也就是上傳地址不能動態去更改，然後去看了一下，需要做以下處理才能動態使用：

action是一個必填參數，且其類型為string，我們把action寫成:action，然後後面跟著一個方法名，調用方法，返回你想要的地址，程式碼範例：

//html 代碼<el-upload :action="UploadUrl()" :on-success="UploadSuccess" :file-list="fileList">  <el-button size="small" type="primary" >點擊上傳</el-button>  <div slot="tip" class="el-upload__tip"></div></el-upload>

// js 代碼在 methods中寫入需要調用的方法methods:{  UploadUrl:function(){    return "返回需要上傳的地址";     }  }  

這是我解決的方法，希望能幫到需要的人

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。