Commit 2b22630162fc6cf85941e3ae33c002cf90854e99
1 parent
bbe19b01
feat: 上传附件组件 + 在首页增加了一个使用的地方(暂时的,后续删掉)
Showing
3 changed files
with
126 additions
and
6 deletions
| 1 | 1 | import request from '@/utils/request' |
| 2 | 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 | 23 | * @param data |
| 22 | 24 | */ |
| 23 | 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> | |
| \ No newline at end of file | ... | ... |
| ... | ... | @@ -39,18 +39,29 @@ |
| 39 | 39 | </view> |
| 40 | 40 | </view> |
| 41 | 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 | 50 | </view> |
| 43 | 51 | </template> |
| 44 | 52 | |
| 45 | 53 | <script> |
| 54 | + import FileUpload from '@/components/file-upload/index.vue' | |
| 46 | 55 | import { |
| 47 | 56 | statisticsCountApi |
| 48 | 57 | } from '@/api/flow.js' |
| 49 | 58 | export default { |
| 59 | + components: { FileUpload }, | |
| 50 | 60 | data() { |
| 51 | 61 | return { |
| 52 | 62 | todoCount: '', |
| 53 | 63 | myCreateCount: '', |
| 64 | + fileInfo: { id: '', name: '' }, | |
| 54 | 65 | sectionList: [{ |
| 55 | 66 | title: '客户开发管理', |
| 56 | 67 | items: [{ | ... | ... |