您好,登錄后才能下訂單哦!
這篇文章主要介紹了VUE+element-ui文件上傳的代碼怎么寫的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇VUE+element-ui文件上傳的代碼怎么寫文章都會(huì)有所收獲,下面我們一起來看看吧。
此前端代碼自己封裝了文件上傳,只需要配置后端接口需求URL以及對(duì)應(yīng)的圖片上傳成功后的處理函數(shù),后端返回OSS生成的圖片訪問地址,然后cropsuccess函數(shù)將上傳成功的圖像進(jìn)行顯示。
<template> <div class="app-container"> <!-- 講師頭像 --> <el-form-item label="講師頭像"> <!-- 頭銜縮略圖 --> <pan-thumb :image="teacher.avatar"/> <!-- 文件上傳按鈕 --> <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更換頭像 </el-button> <!-- v-show:是否顯示上傳組件 :key:類似于id,如果一個(gè)頁(yè)面多個(gè)圖片上傳控件,可以做區(qū)分 :url:后臺(tái)上傳的url地址 @close:關(guān)閉上傳組件 @crop-upload-success:上傳成功后的回調(diào) field就是起name作用,值要與后端接口的參數(shù)一致 --> <image-cropper v-show="imagecropperShow" :width="300" :height="300" :key="imagecropperKey" :url="BASE_API+'/eduoss/fileoss'" field="file" @close="close" @crop-upload-success="cropSuccess"/> </el-form-item> </div> </template>
<script> //引入調(diào)用API層:teacher.js文件 import ImageCropper from '@/components/ImageCropper' import PanThumb from '@/components/PanThumb' export default{ components: { ImageCropper, PanThumb }, data() { return{ teacher:{}, saveBtnDisabled:false, // 保存按鈕是否禁用 imagecropperKey:0,//上傳組件key值 imagecropperShow:false, BASE_API:process.env.BASE_API, //獲取dev.env.js里面地址 saveBtnDisabled:false // 保存按鈕是否禁用, } }, methods: { close() { //關(guān)閉上傳彈框的方法 this.imagecropperShow=false //上傳組件初始化:防止不能連續(xù)上傳修改頭像 this.imagecropperKey = this.imagecropperKey+1 }, //上傳成功后的方法 cropSuccess(data) { this.imagecropperShow=false //上傳之后,后端接口返回?cái)?shù)據(jù)(url)類似response this.teacher.avatar = data.url //上傳組件初始化 this.imagecropperKey = this.imagecropperKey+1 }, } } </script>
<template> <div class="app-container"> <el-form label-width="120px"> <el-form-item label="信息描述"> <el-tag type="info">excel模版說明</el-tag> <el-tag> <i class="el-icon-download"/> <a :href="'/static/01.xlsx'">點(diǎn)擊下載模版</a> </el-tag> </el-form-item> <el-form-item label="選擇Excel"> <el-upload ref="upload" :auto-upload="false" :on-success="fileUploadSuccess" :on-error="fileUploadError" :disabled="importBtnDisabled" :limit="1" :action="BASE_API+'/eduservice/subject/addSubject'" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"> <el-button slot="trigger" size="small" type="primary">選取文件</el-button> <el-button :loading="loading" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button> </el-upload> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { BASE_API: process.env.BASE_API, // 接口API地址 importBtnDisabled: false, // 按鈕是否禁用, loading: false } }, created() { }, methods:{ //點(diǎn)擊按鈕上傳文件到接口里面 submitUpload() { this.importBtnDisabled = true this.loading = true // js: document.getElementById("upload").submit() this.$refs.upload.submit() }, //上傳成功 fileUploadSuccess(response) { //提示信息 this.loading = false this.$message({ type: 'success', message: '添加課程分類成功' }) //跳轉(zhuǎn)課程分類列表 //路由跳轉(zhuǎn) this.$router.push({path:'/subject/list'}) }, //上傳失敗 fileUploadError() { this.loading = false this.$message({ type: 'error', message: '添加課程分類失敗' }) } } } </script>
name屬性值要與后端接口參數(shù)MultipartFile的變量名一致,否則無法映射匹配傳值。
前端標(biāo)識(shí)符屬性值和后端參數(shù)名稱(實(shí)體類中屬性名)保持一致,否則無法直接映射傳參,導(dǎo)致后端接收不到數(shù)據(jù)。
關(guān)于“VUE+element-ui文件上傳的代碼怎么寫”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“VUE+element-ui文件上傳的代碼怎么寫”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。