|
|
@@ -0,0 +1,102 @@
|
|
|
+<template>
|
|
|
+ <van-uploader v-model="arrUploadFile"
|
|
|
+ multiple
|
|
|
+ :max-count="maxCount"
|
|
|
+ :before-read="beforeRead"
|
|
|
+ :after-read="afterRead" @delete="handleDelete"/>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { Uploader, Toast } from 'vant'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'myUploader',
|
|
|
+ components: {
|
|
|
+ 'van-uploader': Uploader
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ maxCount: {
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ uploadType: {
|
|
|
+ type: String,
|
|
|
+ default: 'credit'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ arrUploadFile: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleDelete () {
|
|
|
+ this.$emit('funSetUploadData', this.uploadType, this.arrUploadFile)
|
|
|
+ },
|
|
|
+ beforeRead (file) {
|
|
|
+ const fileList = Array.isArray(file) ? file : [file]
|
|
|
+ const fileType = fileList.every(item => /^image\//.test(item.type) || /(\.png|\.jpeg|\.gif|\.jpg)$/.test(item.name))
|
|
|
+ if (!fileType) {
|
|
|
+ Toast('只能选择图片')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ afterRead (file) {
|
|
|
+ const fileList = Array.isArray(file) ? file : [file]
|
|
|
+ const result = fileList.map(item => this.funUploadImg(item.file))
|
|
|
+ fileList.forEach(item => {
|
|
|
+ item.status = 'uploading'
|
|
|
+ item.message = '上传中...'
|
|
|
+ })
|
|
|
+ Promise.all(result).then(res => {
|
|
|
+ res.forEach((item, index) => {
|
|
|
+ if (item.Data && item.Data.startsWith('http')) {
|
|
|
+ fileList[index].url = item.Data
|
|
|
+ }
|
|
|
+ fileList[index].status = ''
|
|
|
+ fileList[index].message = ''
|
|
|
+ this.$emit('funSetUploadData', this.uploadType, this.arrUploadFile)
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ fileList.forEach(item => {
|
|
|
+ item.status = 'failed'
|
|
|
+ item.message = '上传失败'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ funUploadImg (file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('Img', file, file.name)
|
|
|
+ window.$.ajax({
|
|
|
+ url: 'https://eapitest.ybren.com/act/ActImgUploadEvent/uploadCommentImg',
|
|
|
+ type: 'POST',
|
|
|
+ data: formData,
|
|
|
+ cache: false,
|
|
|
+ contentType: false,
|
|
|
+ processData: false,
|
|
|
+ success (res) {
|
|
|
+ if (res.Status === 1) {
|
|
|
+ resolve(res)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ reject(res)
|
|
|
+ },
|
|
|
+ error (err) {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ ::v-deep .van-uploader__upload {
|
|
|
+ border: 1px dashed #CBB091;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+</style>
|
panyong