Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能
前端
一、uploadList.vue
① 首先在頁(yè)面中添加一個(gè)放置圖片的位置,來(lái)展示圖片
<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(`當(dāng)前限制選擇 1 個(gè)圖片,本次選擇了 ${files.length} 個(gè)文件,共選擇了 ${files.length + fileList.length} 個(gè)圖片`)
}"
: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
// 重置圖片路徑,否則會(huì)加載上一次添加的圖片
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('上傳文件大小不能超過(guò) 2MB!')
return false
}
return file
}
}
后端
后端只需要將相應(yīng)的字段添加好即可,controller層不需要改動(dòng)。
到此這篇關(guān)于Jeeplus-vue 實(shí)現(xiàn)文件的上傳的文章就介紹到這了,更多相關(guān)vue文件上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue?點(diǎn)擊按鈕?路由跳轉(zhuǎn)指定頁(yè)面的實(shí)現(xiàn)方式
這篇文章主要介紹了vue?點(diǎn)擊按鈕?路由跳轉(zhuǎn)指定頁(yè)面的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue路由跳轉(zhuǎn)時(shí)判斷用戶是否登錄功能的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇vue路由跳轉(zhuǎn)時(shí)判斷用戶是否登錄功能的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
一個(gè)Java程序猿眼中的前后端分離以及Vue.js入門(mén)(推薦)
這篇文章主要介紹了前后端分離及Vue.js入門(mén),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)
在日常開(kāi)發(fā)中,我們會(huì)遇到一些情況,限制日期的范圍的選擇,本文就詳細(xì)的介紹了ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),感興趣的可以了解一下2022-04-04
詳解使用VueJS開(kāi)發(fā)項(xiàng)目中的兼容問(wèn)題
這篇文章主要介紹了詳解使用VueJS開(kāi)發(fā)項(xiàng)目中的兼容問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue實(shí)現(xiàn)書(shū)籍購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)書(shū)籍購(gòu)物車(chē)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
element el-input directive數(shù)字進(jìn)行控制
本文介紹了vue使用directive 進(jìn)行控制的方法,使用element開(kāi)發(fā)的過(guò)程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字,并且有不要小數(shù)點(diǎn),有需要小數(shù)點(diǎn)的,就有一定的參考價(jià)值,有興趣的可以了解一下2018-10-10

