Vue2.x + Vant2.x 图片上传封装
Vant2.x 是一个轻量、可靠的移动端组件库,于 2017 年开源。
一、全局安装vant
npm i vant -S
二、安装babel插件,配置按需引入
npm i babel-plugin-import -D
// babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
三、upload-image.vue
<template>
<van-uploader
:file-list="uploadFileList"
:accept="acceptType"
:max-count="maxCounts"
:max-size="uploadSize"
:upload-text="uploadText"
:after-read="readFileHandle"
@delete="delFileHandle"
@oversize="onOversizeToast"
/>
</template>
<script>
import { Uploader } from 'vant'
export default {
name: 'UploadImageList',
components: {
[Uploader.name]: Uploader
},
props: {
/***
* uploadFileList格式
* [{name: '', url: '', isImage: true}]
*/
uploadFileList: {
type: Array,
required: true,
default: () => []
},
uploadText: {
type: String,
default: '上传图片'
},
maxCounts: {
type: Number,
default: 99
},
acceptType: {
type: String,
default: 'image/jpeg,image/jpg,image/png'
},
uploadSize: {
type: Number,
default: 5242880 // 5m
}
},
methods: {
readFileHandle (file) {
this.$emit('readFileEvents', file)
},
delFileHandle (file, detail) {
this.$emit('delEvents', file, detail)
},
onOversizeToast () {
this.$toast('文件大小不能超过5M')
return false
}
}
}
</script>
四、引用页面
<template>
<div class="notice-detail-page">
<image-upload-list
:max-counts="1"
:upload-file-list="uploadList"
@delEvents="onDelFileHandle"
@readFileEvents="onReadFileHandle"
/>
</div>
</template>
<script>
import ImageUploadList from './upload-image.vue'
export default {
name: 'noticeDetail',
components: { ImageUploadList },
data () {
return {
uploadList: []
}
},
methods: {
onReadFileHandle (files) {
console.log(files)
this.uploadList.push({
isImage: true,
url: files.content,
name: files.file.name
})
},
onDelFileHandle (file, item) {
console.log(file, item)
const { index } = item
this.uploadList.splice(index, 1)
}
}
}
</script>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。