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

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

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: {

//选择图片后执行

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 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">确认提交</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+Vant 图片上传加显示的案例 的全部内容, 来源链接: utcz.com/p/238388.html

回到顶部