电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue+Vant 圖片上傳加顯示的案例

瀏覽:6日期:2022-11-06 17:47:57

前端開發想省時間就是要找框架呀!找框架!

vant中上傳圖片組件:https://youzan.github.io/vant/#/zh-CN/uploader

上傳圖片的組件uploader:

<van-uploader :after-read='onRead' accept='image/*' multiple> <imgclass='head-img' src='http://www.hdgsjgj.cn/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實現圖片上傳、圖片預覽、圖片刪除

函數調用方法使用圖片預覽有坑,圖片不顯示

Vue+Vant 圖片上傳加顯示的案例

<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='http://www.hdgsjgj.cn/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 圖片上傳加顯示的案例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 探鸣起名网-品牌起名-英文商标起名-公司命名-企业取名包满意 | 传爱自考网_传爱自学考试网| 压力变送器-上海武锐自动化设备有限公司 | 磁力加热搅拌器-多工位|大功率|数显恒温磁力搅拌器-司乐仪器官网 | 泰国试管婴儿_泰国第三代试管婴儿_泰国试管婴儿费用/多少钱_孕泰来 | 河南mpp电力管_mpp电力管生产厂家_mpp电力电缆保护管价格 - 河南晨翀实业 | 视频教程导航网_视频教程之家_视频教程大全_最新视频教程分享发布平台 | 直齿驱动-新型回转驱动和回转支承解决方案提供商-不二传动 | 对辊式破碎机-对辊制砂机-双辊-双齿辊破碎机-巩义市裕顺机械制造有限公司 | 石磨面粉机|石磨面粉机械|石磨面粉机组|石磨面粉成套设备-河南成立粮油机械有限公司 | elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 我爱古诗词_古诗词名句赏析学习平台 | 蓝鹏测控平台 - 智慧车间系统 - 车间生产数据采集与分析系统 | 打造全球沸石生态圈 - 国投盛世 锂电混合机-新能源混合机-正极材料混料机-高镍,三元材料混料机-负极,包覆混合机-贝尔专业混合混料搅拌机械系统设备厂家 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 小型高低温循环试验箱-可程式高低温湿热交变试验箱-东莞市拓德环境测试设备有限公司 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 沧州友城管业有限公司-内外涂塑钢管-大口径螺旋钢管-涂塑螺旋管-保温钢管生产厂家 | 云阳人才网_云阳招聘网_云阳人才市场_云阳人事人才网_云阳人家招聘网_云阳最新招聘信息 | 三效蒸发器_多效蒸发器价格_四效三效蒸发器厂家-青岛康景辉 | 伶俐嫂培训学校_月嫂培训班在哪里报名学费是多少_月嫂免费政府培训中心推荐 | 楼承板-开闭口楼承板-无锡海逵楼承板| 小青瓦丨古建筑瓦丨青瓦厂家-宜兴市徽派古典建筑材料有限公司 | 工控机,嵌入式主板,工业主板,arm主板,图像采集卡,poe网卡,朗锐智科 | 保镖公司-私人保镖-深圳保镖公司【环宇兄弟保镖】 | 轴流风机-鼓风机-离心风机-散热风扇-罩极电机,生产厂家-首肯电子 | 广西正涛环保工程有限公司【官网】 | 一航网络-软件测评官网 | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 楼承板-开口楼承板-闭口楼承板-无锡海逵| 牛奶检测仪-乳成分分析仪-北京海谊 | 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 湖南长沙商标注册专利申请,长沙公司注册代理记账首选美创! | 带式压滤机_污泥压滤机_污泥脱水机_带式过滤机_带式压滤机厂家-河南恒磊环保设备有限公司 | 实验室隔膜泵-无油防腐蚀隔膜泵-耐腐蚀隔膜真空泵-杭州景程仪器 电杆荷载挠度测试仪-电杆荷载位移-管桩测试仪-北京绿野创能机电设备有限公司 | 电销卡 防封电销卡 不封号电销卡 电话销售卡 白名单电销卡 电销系统 外呼系统 | 桨叶搅拌机_螺旋挤压/方盒旋切造粒机厂家-无锡市鸿诚输送机械有限公司 | 天津仓储物流-天津电商云仓-天津云仓一件代发-博程云仓官网 | 山东锐智科电检测仪器有限公司_超声波测厚仪,涂层测厚仪,里氏硬度计,电火花检漏仪,地下管线探测仪 |