Vue+Vant 图片上传加显示的案例

前端开发想省时间就是要找框架呀！找框架！

vant中上传图片组件：https://youzan.github.io/vant/#/zh-CN/uploader

上传图片的组件uploader：

<van-uploader :after-read='onRead' accept='image/*' multiple> <imgclass='head-img' src='https://www.haobala.com/static/images/addpic.png' ref='goodsImg'/> </van-uploader>

method中

methods: { //选择图片后执行 onRead(file) { console.log(file); //将原图片显示为选择的图片 this.$refs.goodsImg.src = file.content; } }

vant上传的图片是已经base64处理了的，可以直接向后台发了

补充知识：vue +vant + crodova实现图片上传、图片预览、图片删除

函数调用方法使用图片预览有坑，图片不显示

<template> <div class='add-check-page'> <head-com :title='title'></head-com> <van-form @submit='onSubmit'> <h2 class='van-doc-demo-block__title'>添加照片</h2> <van-field name='uploader' class='pic-uploader'> <template #input> <template v-for='(item, index) in file_path'> <div :key='index'> <van-image fit='cover' :src='https://www.haobala.com/bcjs/IP + item' @click='preView(index)'><template v-slot:loading> <van-loading type='spinner' size='20' /></template> </van-image> <van-icon name='close' @click='delPic(index)' /> </div> </template> <van-icon @click='picture' :name='require(’#/images/add_check_icon.png’)' /> <van-uploader multiple :after-read='afterRead' style='display:none'> <van-button :icon='require(’#/images/add_check_icon.png’)' type='default' /> </van-uploader> </template> </van-field> <van-button block type='default' native-type='submit'>确认提交</van-button> </van-form> <van-action-sheet v-model='show' :actions='actions' @select='onSelect' cancel-text='取消' close-on-click-action /> <loading :showLoading='showLoad'></loading> // 使用函数调用图片预览方法，图片无法显示所以改用组件调用 <van-image-preview v-if='imgShow' v-model='imgShow' :images='preList' :start-position='startIndex' @closed='handleClose' ></van-image-preview> </div></template><script>import headCom from ’_c/header/index.vue’import loading from ’_c/loading/index.vue’export default { components: { headCom, loading }, data() { return { // 公司id id: ’’, id2: ’’, title: ’’, file_name: [], file_path: [], content: ’’, show: false, actions: [{ name: ’拍摄’ }, { name: ’从手机相册选择’ }], showLoad: false, imgPre: ’’, imgShow: false, preList: [], startIndex: 0 } }, beforeRouteLeave(to, from, next) { if (this.imgPre) { this.imgPre.close() } next() }, created() { this.id = this.$route.params.id if (this.$route.name === ’editCheck’) { this.title = ’编辑记录’ this.getInfo() } else { this.title = ’添加记录’ } }, methods: { async getInfo() { this.showLoad = true try { let data = { id: this.id } let res = await this.$api.check.edit(data) this.content = res.detail.content this.id2 = res.detail.company_id res.photo_list.forEach((item) => { this.file_name.push(item.file_name) this.file_path.push(item.file_path) }) this.showLoad = false } catch (error) { this.showLoad = false this.$toast(error.msg) } }, async onSubmit(values) { this.showLoad = true try { let data = {} if (this.$route.name === ’editCheck’) { data = { id: this.id, company_id: this.id2, content: values.content, file_names: [...this.file_name], file_paths: [...this.file_path] } await this.$api.check.editPost(data) } else { // 添加 data = { company_id: this.id, content: values.content, file_names: [...this.file_name], file_paths: [...this.file_path] } await this.$api.check.addPost(data) } this.showLoad = false this.$router.go(-1) } catch (error) { this.$toast(error.msg) } }, // 删除图片 delPic(index) { this.file_path.splice(index, 1) this.file_name.splice(index, 1) }, // 图片预览 preView(index) { this.startIndex = index this.preList = [] this.file_path.forEach((item) => { this.preList.push(this.IP + item) }) this.imgShow = true }, // 关闭预览 handleClose() { this.preList = [] this.imgShow = false }, async afterRead(file) { this.showLoad = true try { if (file.length) { file.forEach(async (item) => { let res = await this.$api.base.upload(item) this.file_name.push(res.name) this.file_path.push(res.url) this.showLoad = false }) } else { let res = await this.$api.base.upload(file) this.file_name.push(res.name) this.file_path.push(res.url) this.showLoad = false } } catch (e) { this.showLoad = false this.$toast(e.data) } }, picture() { this.show = true }, // 选择添加图片方式 onSelect(item) { this.show = false if (item.name === ’拍摄’) { this.takePhoto() } else { let dl = document.getElementById(’photo’) dl.click() } }, // 拍照上传 takePhoto() { let that = this // crodova 调取相机拍照 navigator.camera.getPicture(success, error, {}) function success(imageURI) { that.showLoad = true // file uri 上传服务器 that.fileUpload(imageURI) } function error() { this.$toast(’打开相机失败’) } }， // 使用cordova FileUpload上传图片 fileUpload: function(imageURI) { let that = this let FileUploadOptions = window.FileUploadOptions let FileTransfer = window.FileTransfer let options = new FileUploadOptions() options.fileKey = ’file’ options.fileName = imageURI.substr(imageURI.lastIndexOf(’/’) + 1) options.mimeType = ’image/jpeg’ let ft = new FileTransfer() ft.upload(imageURI, encodeURI(this.API + ’/user/uploadImg’), function(data) { let resString = data.response let resObject = JSON.parse(resString) // 字符串转对象 if (resObject.code === 1) { that.file_name.push(resObject.data.name) that.file_path.push(resObject.data.url) that.showLoad = false } else { that.showLoad = false that.$toast(resObject.msg) } }) } }}</script>

以上这篇Vue+Vant 图片上传加显示的案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。