新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
怎么在vue項(xiàng)目中利用el-upload實(shí)現(xiàn)一個文件上傳功能-創(chuàng)新互聯(lián)
這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue項(xiàng)目中利用el-upload實(shí)現(xiàn)一個文件上傳功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
選取文件 上傳到服務(wù)器 只能上傳csv/xslx/xsl文件,且不超過1M
actionUrl: `${env.imgCaptchaUrl}**/upload`, fileList: [], handleChanged(file,fileList){ this.fileList = fileList }, handleExceed (file, fileList) { console.log(file); }, handleSuccess (res, file) { console.log(file); console.log(res); }, handlePreview(file){ console.log(file); }, beforeUpload (file) { if (file.size / 1024 / 1024 > 1) { Vue.$vux.toast.text('上傳文件不超過1M') return false } var ext = file.name.substring(file.name.lastIndexOf('.') + 1) const extension = ext === 'csv' || ext === 'CSV' || ext === 'xlsx' || ext === 'xls' if (!extension) { Vue.$vux.toast.text('上傳文件格式只能為csv、xlsx/xls') return false } }, httpRequest (opt) { const _this = this const file = opt.file Vue.$vux.toast.text('文件上傳中...') var reader = new FileReader() reader.readAsDataURL(file) reader.onload = function (e) { let imgType = '' var ext = file.name.substring(file.name.lastIndexOf('.') + 1) if (ext === 'csv' ) { imgType = 'csv' } if (ext === 'xlsx' || ext === 'xls') { imgType = 'xlsx' } uploadCsv({ files: this.result.replace(`data:image/${imgType};base64,`, '') }) .then(res => { if (res.errno === 0) { Vue.$vux.toast.text('上傳成功') _this.account.license_url = res.data.url } }) .catch(err => {}) } }, submitUpload(){ if(this.fileList.length==0){ this.successDialog = "請先選擇文件"; this.sussAlog = true; return } this.$refs.upload.submit(); }, onDownload(){ let start = "" let end = "" if(this.form.time){ start = parseTime(this.form.time[0]); end = parseTime(this.form.time[1]); } delete(this.form.time) Object.assign(this.form, { first_time: start, end_time: end , }); let { first_time, end_time, } = this.form; window.open(this.downUrl+"lm/downloadModel?"+ "&first_time="+first_time+ "&end_time="+end_time , '_blank'); },
關(guān)于怎么在vue項(xiàng)目中利用el-upload實(shí)現(xiàn)一個文件上傳功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
文章標(biāo)題:怎么在vue項(xiàng)目中利用el-upload實(shí)現(xiàn)一個文件上傳功能-創(chuàng)新互聯(lián)
文章分享:http://fisionsoft.com.cn/article/deospp.html