|
@@ -0,0 +1,228 @@
|
|
|
+import { closeToast, Icon, Image, showLoadingToast, showToast, Uploader } from 'vant'
|
|
|
+import { defineComponent, ref } from 'vue'
|
|
|
+import styles from './index.module.less'
|
|
|
+import { useCustomFieldValue } from '@vant/use'
|
|
|
+import { postMessage } from '@/helpers/native-message'
|
|
|
+import umiRequest from 'umi-request'
|
|
|
+import iconUploader from '@common/images/icon-upload.png'
|
|
|
+import iconUploadClose from '@common/images/icon-upload-close.png'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { getOssUploadUrl, state } from '@/state'
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'col-upload',
|
|
|
+ props: {
|
|
|
+ modelValue: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ deletable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ maxCount: {
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ native: {
|
|
|
+ // 是否原生上传
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ uploadSize: {
|
|
|
+ // 上传图片大小
|
|
|
+ type: Number,
|
|
|
+ default: 5
|
|
|
+ },
|
|
|
+ accept: {
|
|
|
+ type: String,
|
|
|
+ default: 'image/*'
|
|
|
+ },
|
|
|
+ onUploadChange: {
|
|
|
+ type: Function,
|
|
|
+ default: (url: string) => {}
|
|
|
+ },
|
|
|
+ bucket: {
|
|
|
+ type: String,
|
|
|
+ default: 'daya'
|
|
|
+ },
|
|
|
+ uploadIcon: {
|
|
|
+ type: String,
|
|
|
+ default: iconUploader
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ type: String,
|
|
|
+ default: 'default'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ nativeUpload() {
|
|
|
+ postMessage(
|
|
|
+ {
|
|
|
+ api: 'chooseFile',
|
|
|
+ content: { type: 'img', max: 1, bucket: this.bucket }
|
|
|
+ },
|
|
|
+ (res: any) => {
|
|
|
+ console.log(res, 'fileUrl')
|
|
|
+ this.$emit('update:modelValue', [...this.modelValue, res.fileUrl])
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ beforeRead(file: any) {
|
|
|
+ console.log(file, 'beforeRead')
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < this.uploadSize
|
|
|
+ if (!isLt2M) {
|
|
|
+ showToast(`上传文件大小不能超过 ${this.uploadSize}MB`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ beforeDelete(file: any, detail: { index: any }) {
|
|
|
+ // this.dataModel.splice(detail.index, 1)
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ async afterRead(file: any, detail: any) {
|
|
|
+ try {
|
|
|
+ file.status = 'uploading'
|
|
|
+ file.message = '上传中...'
|
|
|
+ await this.uploadFile(file.file)
|
|
|
+ } catch (error) {
|
|
|
+ closeToast()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClose(e: any) {
|
|
|
+ this.$emit('update:modelValue', null)
|
|
|
+ this.onUploadChange()
|
|
|
+ e.stopPropagation()
|
|
|
+ },
|
|
|
+ async getFile(file: any) {
|
|
|
+ try {
|
|
|
+ await this.uploadFile(file)
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async uploadFile(file: any) {
|
|
|
+ // 上传文件
|
|
|
+ try {
|
|
|
+ // 获取签名
|
|
|
+ if (state.platformType === 'SCHOOL') {
|
|
|
+ state.platformApi = '/api-school'
|
|
|
+ } else if (state.platformType === 'TEACHER') {
|
|
|
+ state.platformApi = '/api-teacher'
|
|
|
+ } else if (state.platformType === 'STUDENT') {
|
|
|
+ state.platformApi = '/api-student'
|
|
|
+ }
|
|
|
+ const signUrl = state.platformApi + '/open/getUploadSign'
|
|
|
+ const tempName = file.name || ''
|
|
|
+ const fileName = tempName && tempName.replace(/ /gi, '_')
|
|
|
+ const key = new Date().getTime() + fileName
|
|
|
+ console.log(file)
|
|
|
+
|
|
|
+ const res = await request.post(signUrl, {
|
|
|
+ data: {
|
|
|
+ filename: fileName,
|
|
|
+ bucketName: this.bucket,
|
|
|
+ postData: {
|
|
|
+ filename: fileName,
|
|
|
+ acl: 'public-read',
|
|
|
+ key: key,
|
|
|
+ unknowValueField: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ showLoadingToast({
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ loadingType: 'spinner',
|
|
|
+ duration: 0
|
|
|
+ })
|
|
|
+ const obj = {
|
|
|
+ policy: res.data.policy,
|
|
|
+ signature: res.data.signature,
|
|
|
+ key: key,
|
|
|
+ KSSAccessKeyId: res.data.kssAccessKeyId,
|
|
|
+ acl: 'public-read',
|
|
|
+ name: fileName
|
|
|
+ }
|
|
|
+ const formData = new FormData()
|
|
|
+ for (const key in obj) {
|
|
|
+ formData.append(key, obj[key])
|
|
|
+ }
|
|
|
+ formData.append('file', file, fileName)
|
|
|
+ await umiRequest(getOssUploadUrl(this.bucket), {
|
|
|
+ method: 'POST',
|
|
|
+ data: formData
|
|
|
+ })
|
|
|
+ console.log(getOssUploadUrl(this.bucket) + key)
|
|
|
+ const uploadUrl = getOssUploadUrl(this.bucket) + key
|
|
|
+ closeToast()
|
|
|
+ // 判断是否是多选
|
|
|
+ this.$emit('update:modelValue', [...this.modelValue, uploadUrl])
|
|
|
+ this.onUploadChange([...this.modelValue, uploadUrl])
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error, 'uploadFile')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ useCustomFieldValue(() => this.modelValue)
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div class={styles['uploader-section']}>
|
|
|
+ {this.modelValue.length > 0 &&
|
|
|
+ this.modelValue.map((item: any) => (
|
|
|
+ <div class={[styles.uploader, styles[this.size]]}>
|
|
|
+ {/* 删除按钮 */}
|
|
|
+ {this.deletable && (
|
|
|
+ <Icon name="cross" onClick={this.onClose} class={styles['img-close']} />
|
|
|
+ )}
|
|
|
+ <div class={['van-uploader__upload']}>
|
|
|
+ <Image src={item} class={styles.previewImg} fit="cover" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ {this.native ? (
|
|
|
+ this.maxCount > 1 ? (
|
|
|
+ <div class={[styles.uploader, styles[this.size]]} onClick={this.nativeUpload}>
|
|
|
+ {this.modelValue ? (
|
|
|
+ <Image
|
|
|
+ fit="cover"
|
|
|
+ position="center"
|
|
|
+ class={styles.uploadImg}
|
|
|
+ src={this.modelValue as any}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <Icon name={this.uploadIcon} size="32" />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ ''
|
|
|
+ )
|
|
|
+ ) : this.maxCount > 1 ? (
|
|
|
+ <Uploader
|
|
|
+ class={[styles.uploader, styles[this.size]]}
|
|
|
+ afterRead={this.afterRead}
|
|
|
+ beforeRead={this.beforeRead}
|
|
|
+ beforeDelete={this.beforeDelete}
|
|
|
+ uploadIcon={this.uploadIcon}
|
|
|
+ disabled={this.modelValue.length === this.maxCount}
|
|
|
+ accept={this.accept}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <Uploader
|
|
|
+ class={[styles.uploader, styles[this.size]]}
|
|
|
+ afterRead={this.afterRead}
|
|
|
+ beforeRead={this.beforeRead}
|
|
|
+ beforeDelete={this.beforeDelete}
|
|
|
+ uploadIcon={this.uploadIcon}
|
|
|
+ accept={this.accept}
|
|
|
+ >
|
|
|
+ <Icon name={this.uploadIcon} class={['van-uploader__upload']} size="32" />
|
|
|
+ </Uploader>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|