Commit 2b22630162fc6cf85941e3ae33c002cf90854e99
1 parent
bbe19b01
feat: 上传附件组件 + 在首页增加了一个使用的地方(暂时的,后续删掉)
Showing
3 changed files
with
126 additions
and
6 deletions
| 1 | import request from '@/utils/request' | 1 | import request from '@/utils/request' |
| 2 | import { ContentTypeEnum } from '@/utils/httpEnum'; | 2 | import { ContentTypeEnum } from '@/utils/httpEnum'; |
| 3 | +import config from '@/config' | ||
| 4 | +import { getToken } from '@/utils/auth' | ||
| 3 | 5 | ||
| 4 | 6 | ||
| 5 | /** | 7 | /** |
| @@ -21,12 +23,12 @@ export function getDicByCodeApi(code) { | @@ -21,12 +23,12 @@ export function getDicByCodeApi(code) { | ||
| 21 | * @param data | 23 | * @param data |
| 22 | */ | 24 | */ |
| 23 | export function uploadFileApi(data) { | 25 | export function uploadFileApi(data) { |
| 24 | - return request({ | ||
| 25 | - url: `/sw/filebox/uploadFile`, | ||
| 26 | - method: 'post', | ||
| 27 | - data, | ||
| 28 | - contentType: ContentTypeEnum.BLOB | ||
| 29 | - }) | 26 | + const token = getToken() |
| 27 | + return fetch(config.baseUrl + '/sw/filebox/uploadFile', { | ||
| 28 | + method: 'POST', | ||
| 29 | + headers: token ? { 'X-Auth-Token': token } : {}, | ||
| 30 | + body: data | ||
| 31 | + }).then(res => res.json()) | ||
| 30 | } | 32 | } |
| 31 | 33 | ||
| 32 | /** | 34 | /** |
components/file-upload/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="file-upload"> | ||
| 3 | + <view class="btn" @click="selectFile">{{ innerName ? '重新上传' : '上传附件' }}</view> | ||
| 4 | + <view v-if="showName && innerName" class="file-name">{{ innerName }}</view> | ||
| 5 | + </view> | ||
| 6 | +</template> | ||
| 7 | + | ||
| 8 | +<script> | ||
| 9 | +import { uploadFileApi } from '@/api/base.js' | ||
| 10 | +import upload from '@/utils/upload' | ||
| 11 | +import config from '@/config' | ||
| 12 | +import { getToken } from '@/utils/auth' | ||
| 13 | +export default { | ||
| 14 | + name: 'FileUpload', | ||
| 15 | + props: { | ||
| 16 | + value: { type: Object, default: () => ({ id: '', name: '' }) }, | ||
| 17 | + showName: { type: Boolean, default: false } | ||
| 18 | + }, | ||
| 19 | + data() { | ||
| 20 | + return { innerId: this.value && this.value.id ? String(this.value.id) : '', innerName: this.value && this.value.name ? String(this.value.name) : '' } | ||
| 21 | + }, | ||
| 22 | + watch: { | ||
| 23 | + value(v) { | ||
| 24 | + const id = v && v.id != null ? String(v.id) : '' | ||
| 25 | + const name = v && v.name != null ? String(v.name) : '' | ||
| 26 | + this.innerId = id | ||
| 27 | + this.innerName = name | ||
| 28 | + } | ||
| 29 | + }, | ||
| 30 | + methods: { | ||
| 31 | + async uploadByFormData(fd, name) { | ||
| 32 | + console.log('uploadByFormData__fd', fd) | ||
| 33 | + return uploadFileApi(fd).then(d => { | ||
| 34 | + const data = d && d.data ? d.data : d | ||
| 35 | + const id = (data && (data.id || data.fileId || (data.data && (data.data.id || data.data.fileId)))) ? String(data.id || data.fileId || data.data.id || data.data.fileId) : '' | ||
| 36 | + this.applyResult(id, name) | ||
| 37 | + }) | ||
| 38 | + }, | ||
| 39 | + selectFile() { | ||
| 40 | + if (typeof uni !== 'undefined' && typeof uni.chooseMessageFile === 'function') { | ||
| 41 | + uni.chooseMessageFile({ count: 1, type: 'all', success: async (res) => { | ||
| 42 | + try { | ||
| 43 | + const f = (res && res.tempFiles && res.tempFiles[0]) ? res.tempFiles[0] : null | ||
| 44 | + if (!f) return | ||
| 45 | + const name = f.name || 'file' | ||
| 46 | + if (f.path) { | ||
| 47 | + const r = await upload({ url: '/sw/filebox/uploadFile', filePath: f.path, name: 'file' }) | ||
| 48 | + const d = r && r.data ? r.data : r | ||
| 49 | + const id = (d && (d.id || d.fileId || (d.data && (d.data.id || d.data.fileId)))) ? String(d.id || d.fileId || d.data.id || d.data.fileId) : '' | ||
| 50 | + this.applyResult(id, name) | ||
| 51 | + } else if (f.file) { | ||
| 52 | + const fd = new FormData() | ||
| 53 | + fd.append('file', f.file, name) | ||
| 54 | + await this.uploadByFormData(fd, name) | ||
| 55 | + } | ||
| 56 | + } catch (e) { | ||
| 57 | + uni.showToast({ title: '上传失败', icon: 'none' }) | ||
| 58 | + } | ||
| 59 | + }, fail: () => { uni.showToast({ title: '未选择文件', icon: 'none' }) } }) | ||
| 60 | + return | ||
| 61 | + } | ||
| 62 | + // H5 兜底:动态创建原生 input | ||
| 63 | + try { | ||
| 64 | + const input = document.createElement('input') | ||
| 65 | + input.type = 'file' | ||
| 66 | + input.style.position = 'fixed' | ||
| 67 | + input.style.left = '-9999px' | ||
| 68 | + document.body.appendChild(input) | ||
| 69 | + input.addEventListener('change', this.onFileChange) | ||
| 70 | + input.click() | ||
| 71 | + setTimeout(() => { document.body.removeChild(input) }, 1000) | ||
| 72 | + } catch (e) { | ||
| 73 | + uni.showToast({ title: '无法打开文件选择', icon: 'none' }) | ||
| 74 | + } | ||
| 75 | + }, | ||
| 76 | + async onFileChange(e) { | ||
| 77 | + const files = e && e.target && e.target.files ? e.target.files : [] | ||
| 78 | + const file = files && files[0] ? files[0] : null | ||
| 79 | + if (!file) return | ||
| 80 | + const name = file.name || '' | ||
| 81 | + const fd = new FormData() | ||
| 82 | + fd.append('file', file, name) | ||
| 83 | + try { | ||
| 84 | + await this.uploadByFormData(fd, name) | ||
| 85 | + } catch (e2) { | ||
| 86 | + uni.showToast({ title: '上传失败', icon: 'none' }) | ||
| 87 | + } finally { | ||
| 88 | + if (e && e.target) e.target.value = '' | ||
| 89 | + } | ||
| 90 | + }, | ||
| 91 | + applyResult(id, name) { | ||
| 92 | + this.innerId = id | ||
| 93 | + this.innerName = name | ||
| 94 | + const payload = { id, name } | ||
| 95 | + this.$emit('input', payload) | ||
| 96 | + this.$emit('update:value', payload) | ||
| 97 | + this.$emit('change', payload) | ||
| 98 | + } | ||
| 99 | + } | ||
| 100 | +} | ||
| 101 | +</script> | ||
| 102 | + | ||
| 103 | +<style scoped> | ||
| 104 | +.file-upload { display: flex; align-items: center; } | ||
| 105 | +.btn { color: #3D48A3; font-size: 28rpx; margin-right: 20rpx; cursor: pointer; } | ||
| 106 | +.file-name { font-size: 28rpx; color: rgba(0,0,0,0.9); } | ||
| 107 | +</style> |
| @@ -39,18 +39,29 @@ | @@ -39,18 +39,29 @@ | ||
| 39 | </view> | 39 | </view> |
| 40 | </view> | 40 | </view> |
| 41 | </view> | 41 | </view> |
| 42 | + | ||
| 43 | + <view class="section"> | ||
| 44 | + <text class="section-title">附件上传</text> | ||
| 45 | + <view class="upload-row"> | ||
| 46 | + <FileUpload v-model="fileInfo" /> | ||
| 47 | + </view> | ||
| 48 | + <view v-if="fileInfo && fileInfo.name" class="upload-show">{{ fileInfo.name }}</view> | ||
| 49 | + </view> | ||
| 42 | </view> | 50 | </view> |
| 43 | </template> | 51 | </template> |
| 44 | 52 | ||
| 45 | <script> | 53 | <script> |
| 54 | + import FileUpload from '@/components/file-upload/index.vue' | ||
| 46 | import { | 55 | import { |
| 47 | statisticsCountApi | 56 | statisticsCountApi |
| 48 | } from '@/api/flow.js' | 57 | } from '@/api/flow.js' |
| 49 | export default { | 58 | export default { |
| 59 | + components: { FileUpload }, | ||
| 50 | data() { | 60 | data() { |
| 51 | return { | 61 | return { |
| 52 | todoCount: '', | 62 | todoCount: '', |
| 53 | myCreateCount: '', | 63 | myCreateCount: '', |
| 64 | + fileInfo: { id: '', name: '' }, | ||
| 54 | sectionList: [{ | 65 | sectionList: [{ |
| 55 | title: '客户开发管理', | 66 | title: '客户开发管理', |
| 56 | items: [{ | 67 | items: [{ |