Jeeplus-vue?實現(xiàn)文件的上傳功能
更新時間：2022年09月10日 09:43:14 作者：Echo丶洛塵
這篇文章主要介紹了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中添加相關屬性
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中添加相關屬性
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層不需要改動。
到此這篇關于Jeeplus-vue 實現(xiàn)文件的上傳的文章就介紹到這了,更多相關vue文件上傳內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
如何使用Vue3實現(xiàn)文章內容中多個"關鍵詞"標記高亮顯示
高亮顯示是我們日常開發(fā)中經常會遇到的需求,下面這篇文章主要給大家介紹了關于如何使用Vue3實現(xiàn)文章內容中多個"關鍵詞"標記高亮顯示的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue組件模板及組件互相引用代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
下面小編就為大家分享一篇vue-prop父組件向子組件進行傳值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
下面小編就為大家分享一篇vue 每次渲染完頁面后div的滾動條保持在最底部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關于Vue3項目中引入html頁面的相關資料,Vue3是一個JavaScript框架,通常我們使用它來構建單頁應用程序(SPA),如果你想在HTML頁面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下2023-09-09
在vue2中提供了.sync修飾符,但是在vue3中不再支持.sync,取而代之的是v-model,本文給大家介紹在Vue2中v-model和.sync區(qū)別,感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家詳細介紹了vue2手機APP項目添加開屏廣告或者閃屏廣告的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue 打包體積優(yōu)化方案小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
element-ui中Table表格省市區(qū)合并單元格的方法實現(xiàn)
這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue+iview?Table表格多選切換分頁保持勾選狀態(tài)
這篇文章主要為大家詳細介紹了vue+iview?Table表格多選切換分頁保持勾選狀態(tài)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07