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

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

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

瀏覽:4日期: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
相關文章:
主站蜘蛛池模板: 天然气分析仪-液化气二甲醚分析仪|传昊仪器| 山东聚盛新型材料有限公司-纳米防腐隔热彩铝板和纳米防腐隔热板以及钛锡板、PVDF氟膜板供应商 | 防锈油-助焊剂-光学玻璃清洗剂-贝塔防锈油生产厂家 | 郑州水质检测中心_井水检测_河南废气检测_河南中环嘉创检测 | 长沙发电机-湖南发电机-柴油发电机供应厂家-长沙明邦智能科技 | CCE素质教育博览会 | CCE素博会 | 教育展 | 美育展 | 科教展 | 素质教育展 | 隔离变压器-伺服变压器--输入输出电抗器-深圳市德而沃电气有限公司 | 智能垃圾箱|垃圾房|垃圾分类亭|垃圾分类箱专业生产厂家定做-宿迁市传宇环保设备有限公司 | 工业风机_环保空调_冷风机_工厂车间厂房通风降温设备旺成服务平台 | 上海办公室设计_办公楼,写字楼装修_办公室装修公司-匠御设计 | 英国公司注册-新加坡公司注册-香港公司开户-离岸公司账户-杭州商标注册-杭州优创企业 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 福建自考_福建自学考试网| 真空包装机-诸城市坤泰食品机械有限公司| 黄石妇科医院_黄石东方女子医院_黄石东方妇产医院怎么样 | 模型公司_模型制作_沙盘模型报价-中国模型网 | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 集装袋吨袋生产厂家-噸袋廠傢-塑料编织袋-纸塑复合袋-二手吨袋-太空袋-曹县建烨包装 | 置顶式搅拌器-优莱博化学防爆冰箱-磁驱搅拌器-天津市布鲁克科技有限公司 | 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂_帽子厂_浙江高普制帽厂 | 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 苏商学院官网 - 江苏地区唯一一家企业家自办的前瞻型、实操型商学院 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 | 成都软件开发_OA|ERP|CRM|管理系统定制开发_成都码邻蜀科技 | 防水套管厂家-柔性防水套管-不锈钢|刚性防水套管-天翔管道 | 恒湿机_除湿加湿一体机_恒湿净化消毒一体机厂家-杭州英腾电器有限公司 | 建筑资质代办_工程施工资质办理_资质代办公司_北京众聚企服 | 压砖机_电动螺旋压力机_粉末成型压力机_郑州华隆机械tel_0371-60121717 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 【德信自动化】点胶机_全自动点胶机_自动点胶机厂家_塑料热压机_自动螺丝机-深圳市德信自动化设备有限公司 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 湖南档案密集架,智能,物证,移动,价格-湖南档案密集架厂家 | 紫外线老化试验箱_uv紫外线老化试验箱价格|型号|厂家-正航仪器设备 | 臭氧实验装置_实验室臭氧发生器-北京同林臭氧装置网 | 楼承板-开闭口楼承板-无锡海逵楼承板 | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 |