Vue+Vant 圖片上傳加顯示的案例
前端開發(fā)想省時(shí)間就是要找框架呀!找框架!
vant中上傳圖片組件:https://youzan.github.io/vant/#/zh-CN/uploader
上傳圖片的組件uploader:
<van-uploader :after-read="onRead" accept="image/*" multiple> <imgclass="head-img" src="/static/images/addpic.png" ref="goodsImg"/> </van-uploader>
method中
methods: { //選擇圖片后執(zhí)行 onRead(file) { console.log(file); //將原圖片顯示為選擇的圖片 this.$refs.goodsImg.src = file.content; } }
vant上傳的圖片是已經(jīng)base64處理了的,可以直接向后臺發(fā)了
補(bǔ)充知識:vue +vant + crodova實(shí)現(xiàn)圖片上傳、圖片預(yù)覽、圖片刪除
函數(shù)調(diào)用方法使用圖片預(yù)覽有坑,圖片不顯示
<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 class="item" :key="index"> <van-image fit="cover" :src="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 class="up-btn" @click="picture" :name="require('#/images/add_check_icon.png')" /> <van-uploader id="photo" multiple :after-read="afterRead" style="display:none"> <van-button class="up-btn" :icon="require('#/images/add_check_icon.png')" type="default" /> </van-uploader> </template> </van-field> <van-button class="save" block type="default" native-type="submit">確認(rèn)提交</van-button> </van-form> <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action /> <loading :showLoading="showLoad"></loading> // 使用函數(shù)調(diào)用圖片預(yù)覽方法,圖片無法顯示所以改用組件調(diào)用 <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: '從手機(jī)相冊選擇' }], 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) }, // 圖片預(yù)覽 preView(index) { this.startIndex = index this.preList = [] this.file_path.forEach((item) => { this.preList.push(this.IP + item) }) this.imgShow = true }, // 關(guān)閉預(yù)覽 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 調(diào)取相機(jī)拍照 navigator.camera.getPicture(success, error, {}) function success(imageURI) { that.showLoad = true // file uri 上傳服務(wù)器 that.fileUpload(imageURI) } function error() { this.$toast('打開相機(jī)失敗') } }, // 使用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) // 字符串轉(zhuǎn)對象 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 圖片上傳加顯示的案例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Flask實(shí)現(xiàn)簡單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼
本篇文章主要介紹了Vue+Flask實(shí)現(xiàn)簡單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01使用idea創(chuàng)建第一個(gè)Vue項(xiàng)目
最近在學(xué)習(xí)vue,本文主要介紹了使用idea創(chuàng)建第一個(gè)Vue項(xiàng)目,文中根據(jù)圖文介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue3使用xgPalyer實(shí)現(xiàn)截圖功能的方法詳解
這篇文章主要為大家詳細(xì)介紹了如何在vue3中使用xgPalyer截圖功能,以及自定義插件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02Vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案
這篇文章主要介紹了vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù))
這篇文章主要介紹了vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù)),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10