您现在的位置是：网站首页> 编程资料编程资料

Jeeplus-vue 实现文件的上传功能_vue.js_

2023-05-24 207人已围观

简介 Jeeplus-vue 实现文件的上传功能_vue.js_

前端

一、uploadList.vue

① 首先在页面中添加一个放置图片的位置，来展示图片

② 在data中添加相关属性

data () { return{ searchForm:{ upload: '' }， loading: false, src: '' // 上传图片 }

二、testForm.vue

① 在表单中添加下列代码

② 在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 } }