Jeeplus-vue?實現(xiàn)文件的上傳功能
前端
一、uploadList.vue
① 首先在頁面中添加一個放置圖片的位置,來展示圖片
<el-table-column prop="upload" label="高校證明材料"> <template slot-scope="scope" v-if="scope.row.upload"> <el-image style="height: 30%;width:30%;margin-left:22%;" :src="src" v-for="(src, index) in scope.row.upload.split(',')" :key="index" :preview-src-list="scope.row.upload.split(',')"> </el-image> </template> </el-table-column>
② 在data中添加相關(guān)屬性
data () { return{ searchForm:{ upload: '' }, loading: false, src: '' // 上傳圖片 }
二、testForm.vue
① 在表單中添加下列代碼
<el-col :span="12"> <el-form-item label="上傳圖片" prop="upload"> <el-upload list-type="picture-card" :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/upload`" :headers="{token: $cookie.get('token')}" :before-upload="beforeUpload" :on-preview="(file, fileList) => { $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`, { dangerouslyUseHTMLString: true, showConfirmButton: false, closeOnClickModal: true, customClass: 'showPic' }); }" :on-success="(response, file, fileList) => { inputForm.collegeMaterials = fileList.map(item => (item.response && item.response.url) || item.url).join('|') }" :on-remove="(file, fileList) => { $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => { $message.success(data.msg) }) inputForm.collegeMaterials = fileList.map(item => item.url).join('|') }" :before-remove="(file, fileList) => { return $confirm(`確定刪除 ${file.name}?`) }" multiple :limit="1" :on-exceed="(files, fileList) =>{ $message.warning(`當前限制選擇 1 個圖片,本次選擇了 ${files.length} 個文件,共選擇了 ${files.length + fileList.length} 個圖片`) }" :file-list="picArra"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> </el-col>
② 在data中添加相關(guān)屬性
data () { return { picArra: [], dialogImageUrl: '', dialogVisible: false, disabled: false, inputForm: { upload: '', } } }
③ 在method中替換原始的 this.$nextTick
this.visible = true this.loading = false // 重置圖片路徑,否則會加載上一次添加的圖片 this.picArra = [] this.$nextTick(() => { this.$refs.inputForm.resetFields() if (method === 'edit' || method === 'view') { // 修改或者查看 this.loading = true this.$http({ // upload為controller層的注解路徑,替換一下即可 url: `/upload/queryById?id=${this.inputForm.id}`, method: 'get' }).then(({data}) => { this.inputForm = this.recover(this.inputForm, data.college) this.inputForm.upload.split('|').forEach((item) => { if (item.trim().length > 0) { this.picArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item}) } }) this.loading = false }) } }), // 查看圖片 handlePictureCardPreview (file) { this.dialogImageUrl = file.url this.dialogVisible = true }, continueDoSubmit () { this.$refs['inputForm'].validate((valid) => { if (valid) { this.$emit('addRow', this.oldInputForm, JSON.parse(JSON.stringify(this.inputForm))) this.$refs['inputForm'].resetFields() } }) }, // 判斷上傳圖片的格式 beforeUpload (file) { if (file) { const suffix = file.name.split('.')[1] const size = file.size / 1024 / 1024 < 2 if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) { this.$message.error('上傳圖片只支持 png、jpeg、jpg 格式!') this.$refs.upload.clearFiles() return false } if (!size) { this.$message.error('上傳文件大小不能超過 2MB!') return false } return file } }
后端
后端只需要將相應的字段添加好即可,controller層不需要改動。
到此這篇關(guān)于Jeeplus-vue 實現(xiàn)文件的上傳的文章就介紹到這了,更多相關(guān)vue文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue?點擊按鈕?路由跳轉(zhuǎn)指定頁面的實現(xiàn)方式
這篇文章主要介紹了vue?點擊按鈕?路由跳轉(zhuǎn)指定頁面的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue路由跳轉(zhuǎn)時判斷用戶是否登錄功能的實現(xiàn)
下面小編就為大家?guī)硪黄獀ue路由跳轉(zhuǎn)時判斷用戶是否登錄功能的實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10一個Java程序猿眼中的前后端分離以及Vue.js入門(推薦)
這篇文章主要介紹了前后端分離及Vue.js入門,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04ElementUI日期選擇器時間選擇范圍限制的實現(xiàn)
在日常開發(fā)中,我們會遇到一些情況,限制日期的范圍的選擇,本文就詳細的介紹了ElementUI日期選擇器時間選擇范圍限制的實現(xiàn),文中通過示例代碼介紹的非常詳細,感興趣的可以了解一下2022-04-04element el-input directive數(shù)字進行控制
本文介紹了vue使用directive 進行控制的方法,使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字,并且有不要小數(shù)點,有需要小數(shù)點的,就有一定的參考價值,有興趣的可以了解一下2018-10-10