vant uploader组件，完整使用，单张图片上传

一、图片说明

 

1.html,使用自定义上传样式的上传组件

2. js

二、文字说明，方便复制复用

<van-uploader

v-model="uploadCoverPicList"

:max-count="1"

:max-size="3145728"

accept="image/*"

:before-read="asyncBeforeReadPic"

:after-read="afterReadCoverPic"

@oversize="oversize"

@delete="deleteCoverPic"

>

<img class="uploadImg" :src="img_pre + '/Public/default/images/circle/article_upload.png'" alt="" />

</van-uploader>

// 上传图片 上传前类型校验

asyncBeforeReadPic(file) {

return new Promise((resolve, reject) => {

if (

file.type === 'image/jpg' ||

file.type === 'image/png' ||

file.type === 'image/jpeg' ||

file.type === 'image/gif'

) {

resolve()

} else {

reject()

Toast.fail('请上传 jpg、png、jpeg、gif 格式图片')

}

})

},

// 上传文章封面图片读取完成后的回调函数

afterReadCoverPic(file) {

// 此时可以自行将文件上传至服务器

this.showUploadCoverPicTip = false //上传入口

const params = {

file: file.file,

file_name: 0

}

this._getBaseQn(params)

},

// 图片大小超过限制 3M

oversize(file) {

Toast.fail('图片大小不超过3M')

},

// 删除上传封面图片预览回调

deleteCoverPic() {

Toast.success({

message: '删除成功',

duration: 500

})

this.showUploadCoverPicTip = true

},

// 上传base64,返回七牛云链接

_getBaseQn(params) {

this.$http

.post('/api/upload/QiniuUpload', params, {

emulateJSON: true

})

.then(

res => {

if (res.data.code == 1) {

console.log(this, 'file')

Toast.success('上传成功')

const data = res.data.data

if (res.data.data !== null) {

if (params.file_name == 1) {

this.confInsPic = data.url // 插入图片地址

} else {

this.uploadCoverPicUrl = data.url // 封面图地址

}

}

} else {

Toast.fail(res.data.msg)

}

},

err => {

console.log('请求失败')

}

)

},