您好,登錄后才能下訂單哦!
本文介紹了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 "返回需要上傳的地址"; } }
這是我解決的方法,希望能幫到需要的人
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。