Vue+VANt画像のアップロードと表示の例
先端の開発は時間を節約したいです。フレームを探しています。枠を探せ！
vantに写真コンポーネントをアップロードする：https://youzan.github.io/vant/#/zh-CN/uplloader
アップロード画像のコンポーネントuplloader:
知識を補充します：vue+vant+crodovaはピクチャーのアップロード、ピクチャーのプレビュー、ピクチャーの削除を実現します。
関数の呼び出し方法は画像のプレビューを使ってピットがあります。画像は表示されません。
vantに写真コンポーネントをアップロードする：https://youzan.github.io/vant/#/zh-CN/uplloader
アップロード画像のコンポーネントuplloader:
<van-uploader :after-read="onRead" accept="image/*" multiple>
<imgclass="head-img" src="/static/images/addpic.png" ref="goodsImg"/>
</van-uploader>
methods: {
//
onRead(file) {
console.log(file);
//
this.$refs.goodsImg.src = file.content;
}
}知識を補充します：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>