增强办公
This commit is contained in:
149
components/x-native-uploader/README.md
Normal file
149
components/x-native-uploader/README.md
Normal file
@@ -0,0 +1,149 @@
|
||||
# x-native-uploader 原生文件上传组件
|
||||
|
||||
`x-native-uploader` 是一个跨平台的文件上传组件，专为解决 UniApp 在 App 端文件选择与上传的痛点而设计。它集成了 Native.js 的能力，支持在 Android 和 iOS 上调用原生文件选择器，同时兼容 H5 和小程序平台。
|
||||
|
||||
## 功能特性
|
||||
|
||||
* 📱 **原生体验**: App 端使用 Native.js 调用系统原生文件选择器 (Intent / UIDocumentPicker)，支持选择任意类型文件。
|
||||
* 🚀 **高性能上传**: App 端使用 `plus.uploader` 实现原生上传，支持后台传输、大文件上传，比 WebView AJAX 更稳定。
|
||||
* 🔄 **跨平台兼容**: 自动降级处理，H5 使用 `uni.chooseFile`，小程序使用 `uni.chooseMessageFile`，一套代码多端运行。
|
||||
* 📦 **多选支持**: 支持一次选择多个文件进行批量上传 (Android/iOS/H5/MP)。
|
||||
* 🛠️ **灵活配置**: 支持自定义上传 URL、Header、FormData 以及自定义触发按钮 UI。
|
||||
* 📄 **PDF 及其他文件支持**: 完美处理 Android 平台的 `content://` URI 文件路径，确保 PDF、Word 等各种文档类型的正确上传。
|
||||
|
||||
## 引入组件
|
||||
|
||||
```javascript
|
||||
import xNativeUploader from '@/components/x-native-uploader/x-native-uploader.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
xNativeUploader
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法 (单选)
|
||||
|
||||
默认点击按钮选择单个文件并自动上传。
|
||||
|
||||
```html
|
||||
<x-native-uploader
|
||||
url="https://your-api.com/upload"
|
||||
:header="{ 'Authorization': 'Bearer token' }"
|
||||
:formData="{ userId: '123' }"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
></x-native-uploader>
|
||||
```
|
||||
|
||||
### 多文件上传
|
||||
|
||||
设置 `multiple` 属性开启多选，`limit` 控制最大选择数量。
|
||||
|
||||
```html
|
||||
<x-native-uploader
|
||||
url="https://your-api.com/upload"
|
||||
:multiple="true"
|
||||
:limit="9"
|
||||
fileType="all"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
>
|
||||
<view class="custom-btn">
|
||||
<text>点击批量上传文件</text>
|
||||
</view>
|
||||
</x-native-uploader>
|
||||
```
|
||||
|
||||
### PDF 文件上传（Android 兼容）
|
||||
|
||||
设置 `fileType="all"` 即可支持上传 PDF 文件，组件会自动处理 Android 平台的 `content://` URI 路径：
|
||||
|
||||
```html
|
||||
<x-native-uploader
|
||||
url="https://your-api.com/upload/pdf"
|
||||
fileType="all"
|
||||
accept="application/pdf"
|
||||
@success="handlePdfUploadSuccess"
|
||||
@fail="handleUploadFail"
|
||||
>
|
||||
<view class="upload-btn">
|
||||
<text>上传 PDF 文件</text>
|
||||
</view>
|
||||
</x-native-uploader>
|
||||
```
|
||||
|
||||
### 自定义触发按钮
|
||||
|
||||
通过默认插槽 (slot) 自定义上传按钮样式。
|
||||
|
||||
```html
|
||||
<x-native-uploader url="...">
|
||||
<button type="primary">点击上传</button>
|
||||
</x-native-uploader>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| `url` | 上传接口地址 (必填) | `String` | - |
|
||||
| `name` | 上传文件的字段名 | `String` | `'file'` |
|
||||
| `header` | 请求头对象 | `Object` | `{}` |
|
||||
| `formData` | 额外的上传参数 | `Object` | `{}` |
|
||||
| `fileType` | 文件选择类型，可选值: `image`, `video`, `all` | `String` | `'image'` |
|
||||
| `multiple` | 是否开启多选 | `Boolean` | `false` |
|
||||
| `limit` | 最大选择文件数量 (多选模式下有效) | `Number` | `9` |
|
||||
| `autoUpload` | 选择文件后是否自动上传 | `Boolean` | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| `success` | 上传成功时触发 | `{ file: FileObj, response: String }` |
|
||||
| `fail` | 上传失败时触发 | `{ file: FileObj, error: Any }` |
|
||||
| `progress` | 上传进度更新时触发 | `{ file: FileObj, progress: Number }` |
|
||||
|
||||
### FileObj 数据结构
|
||||
|
||||
```javascript
|
||||
{
|
||||
path: "...", // 文件本地路径
|
||||
name: "...", // 文件名
|
||||
progress: 100, // 上传进度 (0-100)
|
||||
status: "success", // 状态: pending, uploading, success, error
|
||||
statusText: "..." // 状态描述文本
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **Android 权限**: App 端需要 `READ_EXTERNAL_STORAGE` 和 `WRITE_EXTERNAL_STORAGE` 权限。
|
||||
2. **iOS 配置**: iOS 端无需特殊配置，使用 `UIDocumentPickerViewController`。
|
||||
3. **H5 跨域**: 确保上传接口支持 CORS 跨域请求。
|
||||
4. **小程序**: 微信小程序使用 `uni.chooseMessageFile`，支持从聊天记录中选择文件。
|
||||
5. **Android content:// URI 处理**: 组件已自动处理 Android 系统返回的 `content://` 格式 URI，包括对 `raw: `前缀的路径解析，确保 PDF、Word、Excel 等文件能够正确上传。
|
||||
6. **文件格式支持**: 当 `fileType="all"` 时，支持选择任意类型文件，但上传前请确保服务器端支持该文件格式。
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: 为什么在 Android 上选择 PDF 文件后上传失败？
|
||||
|
||||
**A**: 这是因为 Android 系统返回的文件路径是 `content://` 格式的 URI，而不是真实的本地文件路径。本组件已经内置了对这种格式的自动解析处理，确保文件能够正确上传。如果仍然遇到问题，请检查：
|
||||
1. 是否已经正确配置了 Android 权限
|
||||
2. 文件路径是否被正确解析
|
||||
3. 服务器端是否支持接收该文件格式
|
||||
|
||||
### Q: 如何限制只能上传特定类型的文件？
|
||||
|
||||
**A**: 可以通过设置 `fileType` 属性来限制文件类型：
|
||||
- `fileType="image"` - 仅允许选择图片
|
||||
- `fileType="video"` - 仅允许选择视频
|
||||
- `fileType="all"` - 允许选择所有类型文件
|
||||
|
||||
如果需要更精确的控制，可以结合使用 `accept` 属性，例如 `accept="application/pdf"`。
|
||||
730
components/x-native-uploader/x-file-picker.vue
Normal file
730
components/x-native-uploader/x-file-picker.vue
Normal file
@@ -0,0 +1,730 @@
|
||||
<template>
|
||||
<view v-if="visible" class="x-file-picker-mask" @click="close">
|
||||
<view class="x-file-picker-container" @click.stop>
|
||||
<view class="picker-header">
|
||||
<text class="back-btn" @click="goBack" v-if="canGoBack">‹</text>
|
||||
<text class="title-text">{{ titleDisplay }}</text>
|
||||
<view class="header-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 菜单视图 -->
|
||||
<view v-if="mode === 'menu'" class="menu-grid">
|
||||
<view class="menu-item" @click="selectCamera">
|
||||
<view class="menu-icon" style="background: #33C759;">📷</view>
|
||||
<text class="menu-text">相机</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="selectImage">
|
||||
<view class="menu-icon" style="background: #FF2D55;">🖼️</view>
|
||||
<text class="menu-text">图库</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="selectFileSystem">
|
||||
<view class="menu-icon" style="background: #FF9500;">📁</view>
|
||||
<text class="menu-text">文件管理</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="selectVideo">
|
||||
<view class="menu-icon" style="background: #5856D6;">🎥</view>
|
||||
<text class="menu-text">视频</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="browsePath('Download')">
|
||||
<view class="menu-icon" style="background: #007AFF;">⬇️</view>
|
||||
<text class="menu-text">下载</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="browsePath('Documents')">
|
||||
<view class="menu-icon" style="background: #AF52DE;">📄</view>
|
||||
<text class="menu-text">文档</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="browsePath('Music')">
|
||||
<view class="menu-icon" style="background: #FF3B30;">🎵</view>
|
||||
<text class="menu-text">音乐</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="browsePath('Movies')">
|
||||
<view class="menu-icon" style="background: #5AC8FA;">🎬</view>
|
||||
<text class="menu-text">影视</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 文件列表视图 (作为系统API不可用时的降级方案) -->
|
||||
<scroll-view v-else scroll-y class="file-list">
|
||||
<view v-if="loading" class="loading-tips">加载中...</view>
|
||||
<view v-else-if="fileList.length === 0" class="empty-tips">空文件夹</view>
|
||||
|
||||
<view
|
||||
v-for="(item, index) in fileList"
|
||||
:key="index"
|
||||
class="file-item"
|
||||
@click="handleItemClick(item)"
|
||||
>
|
||||
<view class="item-icon">
|
||||
<text v-if="item.isDirectory" style="font-size: 24px;">📁</text>
|
||||
<text v-else style="font-size: 24px;">📄</text>
|
||||
</view>
|
||||
<view class="item-info">
|
||||
<text class="item-name">{{ item.name }}</text>
|
||||
<text class="item-detail" v-if="!item.isDirectory">{{ formatSize(item.size) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部取消按钮 -->
|
||||
<view class="picker-footer" @click="close">
|
||||
<text class="cancel-text">取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'x-file-picker',
|
||||
props: {
|
||||
// 是否支持多选
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 最多选择数量
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 9
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
mode: 'menu', // 'menu' | 'browser'
|
||||
currentEntry: null,
|
||||
currentPath: '',
|
||||
rootPath: '',
|
||||
fileList: [],
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canGoBack() {
|
||||
return this.mode === 'browser';
|
||||
},
|
||||
titleDisplay() {
|
||||
if (this.mode === 'menu') return '选择操作';
|
||||
if (!this.currentPath) return '/';
|
||||
const parts = this.currentPath.split('/');
|
||||
if (parts.length > 2) {
|
||||
return '.../' + parts[parts.length - 1];
|
||||
}
|
||||
return this.currentPath;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.currentEntry = null;
|
||||
this.currentPath = '';
|
||||
this.fileList = [];
|
||||
this.loading = false;
|
||||
this.selectFileSystem();
|
||||
},
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
// 拍照 (保留方法但不显示入口)
|
||||
selectCamera() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['camera'],
|
||||
success: (res) => this.handleImageSuccess(res)
|
||||
});
|
||||
},
|
||||
|
||||
// 相册 (保留方法但不显示入口)
|
||||
selectImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album'],
|
||||
success: (res) => this.handleImageSuccess(res)
|
||||
});
|
||||
},
|
||||
|
||||
handleImageSuccess(res) {
|
||||
const path = res.tempFilePaths[0];
|
||||
let name = 'image.jpg';
|
||||
if (res.tempFiles && res.tempFiles[0] && res.tempFiles[0].name) {
|
||||
name = res.tempFiles[0].name;
|
||||
} else {
|
||||
name = path.substring(path.lastIndexOf('/') + 1);
|
||||
}
|
||||
this.$emit('select', { path, name });
|
||||
this.close();
|
||||
},
|
||||
|
||||
// 视频
|
||||
selectVideo() {
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const path = res.tempFilePath;
|
||||
let name = 'video.mp4';
|
||||
if (res.tempFile && res.tempFile.name) {
|
||||
name = res.tempFile.name;
|
||||
} else {
|
||||
name = path.substring(path.lastIndexOf('/') + 1);
|
||||
}
|
||||
this.$emit('select', { path, name });
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
selectFileSystem() {
|
||||
// #ifdef APP-PLUS
|
||||
if (plus.os.name === 'Android') {
|
||||
this.selectFileByNativeAndroid();
|
||||
return;
|
||||
}
|
||||
if (plus.os.name === 'iOS') {
|
||||
this.selectFileByNativeIOS();
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
this.browsePath('root');
|
||||
},
|
||||
|
||||
handleFileSuccess(res) {
|
||||
if (this.multiple) {
|
||||
// 多选处理
|
||||
const files = (res.tempFiles || []).map(file => {
|
||||
let name = file.name || '';
|
||||
const path = file.path || '';
|
||||
if (!name && path) {
|
||||
name = path.substring(path.lastIndexOf('/') + 1);
|
||||
}
|
||||
return { path, name: name || 'file' };
|
||||
});
|
||||
|
||||
if (files.length === 0 && res.tempFilePaths) {
|
||||
res.tempFilePaths.forEach(path => {
|
||||
const name = path.substring(path.lastIndexOf('/') + 1);
|
||||
files.push({ path, name });
|
||||
});
|
||||
}
|
||||
|
||||
if (files.length === 0) {
|
||||
uni.showToast({ title: '未选择文件', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.$emit('select', files); // 返回数组
|
||||
} else {
|
||||
// 单选兼容处理 (返回单个对象)
|
||||
const file = res.tempFiles && res.tempFiles[0] ? res.tempFiles[0] : null;
|
||||
const path = (file && file.path) || (res.tempFilePaths && res.tempFilePaths[0]) || '';
|
||||
let name = (file && file.name) || 'file';
|
||||
if (!name && path) {
|
||||
name = path.substring(path.lastIndexOf('/') + 1);
|
||||
}
|
||||
if (!path) {
|
||||
uni.showToast({ title: '未选择文件', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.$emit('select', { path, name });
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
|
||||
selectFileByNativeAndroid() {
|
||||
const main = plus.android.runtimeMainActivity();
|
||||
const Intent = plus.android.importClass('android.content.Intent');
|
||||
const intent = new Intent(Intent.ACTION_GET_CONTENT);
|
||||
intent.setType('*/*');
|
||||
intent.addCategory(Intent.CATEGORY_OPENABLE);
|
||||
intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
|
||||
|
||||
if (this.multiple) {
|
||||
intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
|
||||
}
|
||||
|
||||
// 生成随机 requestCode (10000 ~ 50000) 避免冲突
|
||||
const requestCode = 10000 + Math.floor(Math.random() * 40000);
|
||||
|
||||
// 保存旧的 onActivityResult 回调
|
||||
const oldActivityResult = main.onActivityResult;
|
||||
|
||||
main.onActivityResult = (requestCodeResult, resultCode, data) => {
|
||||
// 如果有旧的回调，先执行
|
||||
if (oldActivityResult) {
|
||||
try {
|
||||
oldActivityResult(requestCodeResult, resultCode, data);
|
||||
} catch (e) {
|
||||
console.error('Old onActivityResult failed', e);
|
||||
}
|
||||
}
|
||||
|
||||
if (requestCodeResult !== requestCode) return;
|
||||
|
||||
if (resultCode !== -1 || !data) { // -1 is Activity.RESULT_OK
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理多选 ClipData
|
||||
let clipData = null;
|
||||
try {
|
||||
clipData = data.getClipData();
|
||||
} catch(e) {
|
||||
console.warn('getClipData failed', e);
|
||||
}
|
||||
|
||||
console.log('Android File Picked: multiple=', this.multiple, 'clipData=', clipData);
|
||||
|
||||
if (clipData && this.multiple) {
|
||||
let count = 0;
|
||||
try {
|
||||
// 尝试直接调用
|
||||
count = clipData.getItemCount();
|
||||
} catch (e) {
|
||||
console.warn('clipData.getItemCount() failed, trying plus.android.invoke', e);
|
||||
try {
|
||||
// 降级尝试
|
||||
count = plus.android.invoke(clipData, 'getItemCount');
|
||||
} catch (e2) {
|
||||
console.error('All getItemCount attempts failed', e2);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('ClipData count:', count);
|
||||
|
||||
if (count > 0) {
|
||||
const files = [];
|
||||
let processedCount = 0;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
try {
|
||||
// 尝试直接调用或 invoke
|
||||
let item = null;
|
||||
try {
|
||||
item = clipData.getItemAt(i);
|
||||
} catch(e) {
|
||||
item = plus.android.invoke(clipData, 'getItemAt', i);
|
||||
}
|
||||
|
||||
if (!item) throw new Error('Item is null');
|
||||
|
||||
let uri = null;
|
||||
try {
|
||||
uri = item.getUri();
|
||||
} catch(e) {
|
||||
uri = plus.android.invoke(item, 'getUri');
|
||||
}
|
||||
|
||||
if (!uri) throw new Error('Uri is null');
|
||||
|
||||
const uriStr = uri.toString();
|
||||
|
||||
// 异步获取每个文件信息
|
||||
this.resolveAndroidFile(main, uri, uriStr, (file) => {
|
||||
files.push(file);
|
||||
processedCount++;
|
||||
if (processedCount === count) {
|
||||
this.emitSelectFiles(files);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Process clip item failed at index ' + i, e);
|
||||
processedCount++;
|
||||
if (processedCount === count) {
|
||||
this.emitSelectFiles(files);
|
||||
}
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
// 如果 count 为 0，降级到单选逻辑
|
||||
}
|
||||
|
||||
// 单选或不支持 ClipData
|
||||
const uri = data.getData();
|
||||
console.log('Single URI:', uri);
|
||||
if (!uri) {
|
||||
console.error('No data uri found');
|
||||
return;
|
||||
}
|
||||
const uriStr = uri.toString();
|
||||
|
||||
this.resolveAndroidFile(main, uri, uriStr, (file) => {
|
||||
console.log('Resolved single file:', file);
|
||||
if (this.multiple) {
|
||||
this.emitSelectFiles([file]);
|
||||
} else {
|
||||
this.emitSelect(file.path, file.name);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
main.startActivityForResult(intent, requestCode);
|
||||
},
|
||||
|
||||
resolveAndroidFile(main, uri, uriStr, callback) {
|
||||
let callbackCalled = false;
|
||||
const safeCallback = (res) => {
|
||||
if (callbackCalled) return;
|
||||
callbackCalled = true;
|
||||
callback(res);
|
||||
};
|
||||
|
||||
plus.io.resolveLocalFileSystemURL(uriStr, (entry) => {
|
||||
safeCallback({ path: entry.fullPath, name: entry.name || '' });
|
||||
}, (e) => {
|
||||
console.log('resolveLocalFileSystemURL failed', e);
|
||||
let name = this.getAndroidFileName(main, uri);
|
||||
if (!name) {
|
||||
try {
|
||||
const path = uri.getPath();
|
||||
if (path) {
|
||||
const lastSlash = path.lastIndexOf('/');
|
||||
if (lastSlash !== -1) {
|
||||
name = decodeURIComponent(path.substring(lastSlash + 1));
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
safeCallback({ path: uriStr, name: name || 'file' });
|
||||
});
|
||||
},
|
||||
|
||||
getAndroidFileName(main, uri) {
|
||||
try {
|
||||
const OpenableColumns = plus.android.importClass('android.provider.OpenableColumns');
|
||||
const resolver = main.getContentResolver();
|
||||
plus.android.importClass(resolver); // 确保 resolver 方法被绑定
|
||||
const cursor = resolver.query(uri, null, null, null, null);
|
||||
if (cursor) {
|
||||
plus.android.importClass(cursor); // 确保 cursor 方法被绑定
|
||||
if (cursor.moveToFirst()) {
|
||||
const index = cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME);
|
||||
if (index > -1) {
|
||||
const name = cursor.getString(index);
|
||||
cursor.close();
|
||||
return name || '';
|
||||
}
|
||||
}
|
||||
cursor.close();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('getAndroidFileName error', e);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
selectFileByNativeIOS() {
|
||||
const UIDocumentPickerViewController = plus.ios.importClass('UIDocumentPickerViewController');
|
||||
const picker = new UIDocumentPickerViewController(['public.data'], 0);
|
||||
picker.allowsMultipleSelection = this.multiple;
|
||||
picker.onDidPickDocumentAtURL = (url) => {
|
||||
const path = plus.ios.invoke(url, 'path');
|
||||
const name = this.extractName(path);
|
||||
if (this.multiple) {
|
||||
this.emitSelectFiles([{ path, name }]);
|
||||
} else {
|
||||
this.emitSelect(path, name);
|
||||
}
|
||||
plus.ios.deleteObject(picker);
|
||||
};
|
||||
picker.onDidPickDocumentsAtURLs = (urls) => {
|
||||
const count = urls.count();
|
||||
if (count > 0) {
|
||||
if (this.multiple) {
|
||||
const files = [];
|
||||
for(let i=0; i<count; i++) {
|
||||
const url = urls.objectAtIndex(i);
|
||||
const path = plus.ios.invoke(url, 'path');
|
||||
files.push({ path, name: this.extractName(path) });
|
||||
}
|
||||
this.emitSelectFiles(files);
|
||||
} else {
|
||||
const first = urls.objectAtIndex(0);
|
||||
const path = plus.ios.invoke(first, 'path');
|
||||
this.emitSelect(path, this.extractName(path));
|
||||
}
|
||||
}
|
||||
plus.ios.deleteObject(picker);
|
||||
};
|
||||
picker.onWasCancelled = () => {
|
||||
plus.ios.deleteObject(picker);
|
||||
};
|
||||
const current = plus.ios.currentViewController();
|
||||
current.presentViewController(picker, true, null);
|
||||
},
|
||||
|
||||
extractName(path) {
|
||||
if (!path) return '';
|
||||
return path.substring(path.lastIndexOf('/') + 1);
|
||||
},
|
||||
|
||||
emitSelectFiles(files) {
|
||||
if (!files || files.length === 0) {
|
||||
uni.showToast({ title: '未选择文件', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.$emit('select', files);
|
||||
this.close();
|
||||
},
|
||||
|
||||
emitSelect(path, name) {
|
||||
if (!path) {
|
||||
uni.showToast({ title: '未选择文件', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
const fileName = name || this.extractName(path) || 'file';
|
||||
this.$emit('select', { path, name: fileName });
|
||||
this.close();
|
||||
},
|
||||
|
||||
/**
|
||||
* 浏览特定目录
|
||||
* 由于标准基座不支持 uni.chooseFile，这里使用 plus.io 进行降级处理
|
||||
* 保持 UI 风格一致，但在应用内浏览文件
|
||||
*/
|
||||
browsePath(type) {
|
||||
this.visible = true; // 仅在需要浏览器 UI 时显示遮罩
|
||||
this.mode = 'browser';
|
||||
this.loading = true;
|
||||
|
||||
let targetPath = '';
|
||||
// #ifdef APP-PLUS
|
||||
const base = '/storage/emulated/0/';
|
||||
switch(type) {
|
||||
case 'Download': targetPath = base + 'Download/'; break;
|
||||
case 'Documents': targetPath = base + 'Documents/'; break;
|
||||
case 'Music': targetPath = base + 'Music/'; break;
|
||||
case 'Movies': targetPath = base + 'Movies/'; break;
|
||||
case 'root': targetPath = base; break;
|
||||
default: targetPath = base;
|
||||
}
|
||||
|
||||
plus.io.resolveLocalFileSystemURL(targetPath, (entry) => {
|
||||
this.rootPath = entry.fullPath;
|
||||
this.readDirectory(entry);
|
||||
}, (e) => {
|
||||
console.error('Dir access failed', e);
|
||||
if (type !== 'root') {
|
||||
// 失败尝试回退到根目录
|
||||
this.browsePath('root');
|
||||
} else {
|
||||
uni.showToast({ title: '无法访问存储', icon: 'none' });
|
||||
this.mode = 'menu';
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
uni.showToast({ title: '仅App端支持', icon: 'none' });
|
||||
this.mode = 'menu';
|
||||
// #endif
|
||||
},
|
||||
|
||||
readDirectory(entry) {
|
||||
this.currentEntry = entry;
|
||||
this.currentPath = entry.fullPath;
|
||||
this.loading = true;
|
||||
this.fileList = [];
|
||||
|
||||
const reader = entry.createReader();
|
||||
reader.readEntries((entries) => {
|
||||
const list = [];
|
||||
if (entries.length > 0) {
|
||||
// 排序: 文件夹在前
|
||||
entries.sort((a, b) => {
|
||||
if (a.isDirectory && !b.isDirectory) return -1;
|
||||
if (!a.isDirectory && b.isDirectory) return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
entries.forEach(item => {
|
||||
if (item.name.startsWith('.')) return;
|
||||
list.push({
|
||||
name: item.name,
|
||||
isDirectory: item.isDirectory,
|
||||
fullPath: item.fullPath,
|
||||
entry: item,
|
||||
size: 0
|
||||
});
|
||||
});
|
||||
}
|
||||
this.fileList = list;
|
||||
this.loading = false;
|
||||
}, (e) => {
|
||||
console.error('Read dir failed', e);
|
||||
this.loading = false;
|
||||
uni.showToast({ title: '读取目录失败', icon: 'none' });
|
||||
});
|
||||
},
|
||||
|
||||
handleItemClick(item) {
|
||||
if (item.isDirectory) {
|
||||
this.readDirectory(item.entry);
|
||||
} else {
|
||||
this.$emit('select', {
|
||||
path: item.fullPath,
|
||||
name: item.name
|
||||
});
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
goBack() {
|
||||
if (this.currentPath === this.rootPath) {
|
||||
this.mode = 'menu';
|
||||
return;
|
||||
}
|
||||
if (!this.currentEntry) {
|
||||
this.mode = 'menu';
|
||||
return;
|
||||
}
|
||||
this.currentEntry.getParent((parentEntry) => {
|
||||
this.readDirectory(parentEntry);
|
||||
}, (e) => {
|
||||
this.mode = 'menu';
|
||||
});
|
||||
},
|
||||
|
||||
formatSize(size) {
|
||||
if (size < 1024) return size + ' B';
|
||||
if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB';
|
||||
return (size / 1024 / 1024).toFixed(2) + ' MB';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-file-picker-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end; /* 底部对齐 */
|
||||
}
|
||||
.x-file-picker-container {
|
||||
width: 100%;
|
||||
height: 60vh; /* 半屏高度 */
|
||||
background: #fff;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.picker-header {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.back-btn {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
width: 40px;
|
||||
}
|
||||
.header-right {
|
||||
width: 40px;
|
||||
}
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.menu-grid {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px 10px;
|
||||
align-content: flex-start;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.menu-item {
|
||||
width: 25%; /* 4列布局 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.menu-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px; /* 大圆角 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
.menu-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list {
|
||||
flex: 1;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.loading-tips, .empty-tips {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.file-item:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.item-icon {
|
||||
margin-right: 15px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
color: #999;
|
||||
}
|
||||
.item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.item-name {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.item-detail {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.picker-footer {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 8px solid #f8f8f8; /* 分隔条效果 */
|
||||
background: #fff;
|
||||
}
|
||||
.cancel-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
532
components/x-native-uploader/x-native-uploader.vue
Normal file
532
components/x-native-uploader/x-native-uploader.vue
Normal file
@@ -0,0 +1,532 @@
|
||||
<template>
|
||||
<view class="x-native-uploader">
|
||||
<view class="upload-trigger" @click="handleSelect">
|
||||
<slot>
|
||||
<view class="default-btn">
|
||||
<text class="plus">+</text>
|
||||
<text class="text">选择文件并上传</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
|
||||
<!-- 进度条展示 -->
|
||||
<view v-if="files.length > 0" class="file-list">
|
||||
<view v-for="(file, index) in files" :key="index" class="file-item">
|
||||
<view class="file-info">
|
||||
<text class="file-name">{{ file.name }}</text>
|
||||
<view class="file-actions">
|
||||
<text class="file-status">{{ file.statusText }}</text>
|
||||
<text
|
||||
class="delete-btn"
|
||||
hover-class="delete-btn--hover"
|
||||
hover-stay-time="80"
|
||||
@click.stop="removeFile(index)"
|
||||
>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-inner" :style="{ width: file.progress + '%' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 文件选择器弹窗 -->
|
||||
<x-file-picker ref="filePicker" :multiple="multiple" :limit="limit" @select="onFilePicked"></x-file-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import xFilePicker from '../x-file-picker/x-file-picker.vue';
|
||||
|
||||
export default {
|
||||
name: 'x-native-uploader',
|
||||
components: {
|
||||
xFilePicker
|
||||
},
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ''
|
||||
},
|
||||
// 上传参数
|
||||
formData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
// 请求头
|
||||
header: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
// 文件字段名
|
||||
name: {
|
||||
type: String,
|
||||
default: 'file'
|
||||
},
|
||||
// 是否自动上传
|
||||
autoUpload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 文件选择类型: image, video, all
|
||||
fileType: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
// 是否多选
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 最大选择数量
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 9
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
files: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect() {
|
||||
// #ifdef APP-PLUS
|
||||
this.selectFileNative();
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.selectFileWeb();
|
||||
// #endif
|
||||
},
|
||||
|
||||
// Web/小程序端兼容
|
||||
selectFileWeb() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
this.processFile(tempFilePath);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// App端 Native 逻辑
|
||||
selectFileNative() {
|
||||
if (this.fileType === 'all') {
|
||||
// 使用自定义的 Native.js 文件选择器 (x-file-picker)
|
||||
// 替代不稳定的 uni.chooseFile
|
||||
this.$refs.filePicker.open();
|
||||
} else if (this.fileType === 'video') {
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePath;
|
||||
// 尝试获取文件名，如果没有则从路径截取
|
||||
let fileName = 'video.mp4';
|
||||
if (res.tempFile && res.tempFile.name) {
|
||||
fileName = res.tempFile.name;
|
||||
} else {
|
||||
fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
|
||||
}
|
||||
this.processFile(tempFilePath, fileName);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 默认图片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
// 从路径提取文件名
|
||||
let fileName = 'image.jpg';
|
||||
if (res.tempFiles && res.tempFiles[0] && res.tempFiles[0].name) {
|
||||
fileName = res.tempFiles[0].name;
|
||||
} else {
|
||||
fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
|
||||
}
|
||||
this.processFile(tempFilePath, fileName);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 自定义文件选择器回调
|
||||
onFilePicked(e) {
|
||||
console.log('onFilePicked event:', e);
|
||||
// e 可以是单个对象 {path, name} 或数组 [{path, name}, ...]
|
||||
if (Array.isArray(e)) {
|
||||
console.log('Processing array of files:', e.length);
|
||||
e.forEach(item => {
|
||||
this.processFile(item.path, item.name);
|
||||
});
|
||||
} else {
|
||||
console.log('Processing single file');
|
||||
this.processFile(e.path, e.name);
|
||||
}
|
||||
},
|
||||
|
||||
// 解析content:// URI为真实文件路径
|
||||
resolveContentUri(path) {
|
||||
// 非content URI直接返回
|
||||
if (!path.startsWith('content://')) {
|
||||
return Promise.resolve(path);
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
// 1. 最优先处理用户遇到的raw:格式URI
|
||||
// 匹配: content://.../document/raw%3A%2Fstorage%2Femulated%2F0%2F...
|
||||
const rawMatch = path.match(/document\/raw%3A(.+)/);
|
||||
if (rawMatch) {
|
||||
try {
|
||||
// 解码并恢复路径分隔符
|
||||
const decodedPath = decodeURIComponent(rawMatch[1]);
|
||||
resolve(decodedPath);
|
||||
return;
|
||||
} catch (e) {
|
||||
console.warn('解码raw URI失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 尝试使用plus.io解析
|
||||
try {
|
||||
plus.io.resolveLocalFileSystemURL(path, (entry) => {
|
||||
resolve(entry.fullPath);
|
||||
}, () => {
|
||||
// 解析失败时返回原始路径
|
||||
resolve(path);
|
||||
});
|
||||
} catch (e) {
|
||||
// 任何异常都返回原始路径
|
||||
resolve(path);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 获取MediaStore中的文件路径
|
||||
getMediaStorePath(contentUri, mainActivity) {
|
||||
try {
|
||||
const resolver = mainActivity.getContentResolver();
|
||||
const cursor = resolver.query(plus.android.invoke('android.net.Uri', 'parse', contentUri),
|
||||
['_data'], null, null, null);
|
||||
|
||||
if (cursor && cursor.moveToFirst()) {
|
||||
const path = cursor.getString(0);
|
||||
cursor.close();
|
||||
return path;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取MediaStore路径失败:', e);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
processFile(path, name = 'unknown') {
|
||||
this.resolveContentUri(path).then((realPath) => {
|
||||
const fileObj = {
|
||||
path: realPath,
|
||||
name: name,
|
||||
progress: 0,
|
||||
status: 'pending', // pending, uploading, success, error
|
||||
statusText: '等待上传'
|
||||
};
|
||||
this.files.push(fileObj);
|
||||
|
||||
if (this.autoUpload) {
|
||||
// #ifdef APP-PLUS
|
||||
this.uploadByNative(fileObj);
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
this.uploadByUni(fileObj);
|
||||
// #endif
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 如果解析失败，仍然创建fileObj，但是状态为error
|
||||
const fileObj = {
|
||||
path: path,
|
||||
name: name,
|
||||
progress: 0,
|
||||
status: 'error',
|
||||
statusText: '无法解析文件路径: ' + error.message
|
||||
};
|
||||
this.files.push(fileObj);
|
||||
this.$emit('fail', { file: fileObj, error: error.message });
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 使用 uni.uploadFile 进行上传
|
||||
* 兼容 H5 和 小程序
|
||||
*/
|
||||
uploadByUni(fileObj) {
|
||||
if (!this.url) {
|
||||
uni.showToast({ title: '请配置上传URL', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
this.resolveContentUri(fileObj.path).then((realPath) => {
|
||||
fileObj.status = 'uploading';
|
||||
fileObj.statusText = '上传中...';
|
||||
|
||||
const uploadTask = uni.uploadFile({
|
||||
url: this.url,
|
||||
filePath: realPath,
|
||||
name: this.name,
|
||||
header: this.header,
|
||||
formData: this.formData,
|
||||
success: (uploadFileRes) => {
|
||||
if (uploadFileRes.statusCode === 200) {
|
||||
fileObj.progress = 100;
|
||||
fileObj.status = 'success';
|
||||
fileObj.statusText = '上传成功';
|
||||
this.$emit('success', {
|
||||
file: fileObj,
|
||||
response: uploadFileRes.data
|
||||
});
|
||||
} else {
|
||||
fileObj.status = 'error';
|
||||
fileObj.statusText = '上传失败';
|
||||
this.$emit('fail', {
|
||||
file: fileObj,
|
||||
error: uploadFileRes.statusCode
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
fileObj.status = 'error';
|
||||
fileObj.statusText = '上传失败';
|
||||
this.$emit('fail', {
|
||||
file: fileObj,
|
||||
error: err
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
fileObj._task = uploadTask;
|
||||
|
||||
uploadTask.onProgressUpdate((res) => {
|
||||
fileObj.progress = res.progress;
|
||||
this.$emit('progress', {
|
||||
file: fileObj,
|
||||
progress: res.progress
|
||||
});
|
||||
});
|
||||
}).catch((error) => {
|
||||
fileObj.status = 'error';
|
||||
fileObj.statusText = '无法解析文件路径: ' + error.message;
|
||||
console.error('UploadByUni error:', error);
|
||||
this.$emit('fail', { file: fileObj, error: error.message });
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 使用 HTML5+ Native API 进行上传
|
||||
* 这是 App 端推荐的“原生”上传方式
|
||||
*/
|
||||
uploadByNative(fileObj) {
|
||||
if (!this.url) {
|
||||
uni.showToast({ title: '请配置上传URL', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
this.resolveContentUri(fileObj.path).then((realPath) => {
|
||||
fileObj.status = 'uploading';
|
||||
fileObj.statusText = '上传中...';
|
||||
|
||||
// 创建上传任务
|
||||
// 文档: https://www.html5plus.org/doc/zh_cn/uploader.html
|
||||
const task = plus.uploader.createUpload(
|
||||
this.url,
|
||||
{
|
||||
method: 'POST',
|
||||
priority: 100
|
||||
},
|
||||
(upload, status) => {
|
||||
// 上传完成回调
|
||||
if (status === 200) {
|
||||
fileObj.progress = 100;
|
||||
fileObj.status = 'success';
|
||||
fileObj.statusText = '上传成功';
|
||||
this.$emit('success', {
|
||||
file: fileObj,
|
||||
response: upload.responseText
|
||||
});
|
||||
console.log('Upload success: ' + upload.responseText);
|
||||
} else {
|
||||
fileObj.status = 'error';
|
||||
fileObj.statusText = '上传失败';
|
||||
this.$emit('fail', {
|
||||
file: fileObj,
|
||||
error: status
|
||||
});
|
||||
console.log('Upload failed: ' + status);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
fileObj._task = task;
|
||||
|
||||
// 添加上传文件
|
||||
// addFile(path, options)
|
||||
const added = task.addFile(realPath, { key: this.name });
|
||||
|
||||
if (!added) {
|
||||
fileObj.status = 'error';
|
||||
fileObj.statusText = '文件添加失败';
|
||||
console.error('Task addFile failed');
|
||||
this.$emit('fail', { file: fileObj, error: 'Failed to add file' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加 header
|
||||
if (this.header) {
|
||||
for (const key in this.header) {
|
||||
task.setRequestHeader(key, this.header[key]);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加 formData
|
||||
if (this.formData) {
|
||||
for (const key in this.formData) {
|
||||
task.addData(key, String(this.formData[key]));
|
||||
}
|
||||
}
|
||||
|
||||
// 监听进度
|
||||
task.addEventListener('statechanged', (upload, status) => {
|
||||
// upload.state: 3 (Connected/Uploading), 4 (Completed)
|
||||
if (upload.state === 3) { // 上传中
|
||||
const percent = Math.floor((upload.uploadedSize / upload.totalSize) * 100);
|
||||
fileObj.progress = percent;
|
||||
this.$emit('progress', {
|
||||
file: fileObj,
|
||||
progress: percent
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 开始上传
|
||||
task.start();
|
||||
}).catch((error) => {
|
||||
fileObj.status = 'error';
|
||||
fileObj.statusText = '无法解析文件路径: ' + error.message;
|
||||
console.error('UploadByNative error:', error);
|
||||
this.$emit('fail', { file: fileObj, error: error.message });
|
||||
});
|
||||
},
|
||||
|
||||
removeFile(index) {
|
||||
const fileObj = this.files[index];
|
||||
if (!fileObj) return;
|
||||
|
||||
const task = fileObj._task;
|
||||
if (fileObj.status === 'uploading' && task) {
|
||||
try {
|
||||
if (typeof task.abort === 'function') {
|
||||
task.abort();
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
this.files.splice(index, 1);
|
||||
this.$emit('remove', {
|
||||
file: fileObj,
|
||||
index
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-native-uploader {
|
||||
width: 100%;
|
||||
}
|
||||
.upload-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
.default-btn {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.plus {
|
||||
font-size: 40px;
|
||||
color: #999;
|
||||
line-height: 1;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.file-list {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.file-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.file-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.file-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.file-status {
|
||||
color: #8a8f98;
|
||||
font-size: 12px;
|
||||
}
|
||||
.delete-btn {
|
||||
margin-left: 8px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
color: #ff3b30;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: rgba(255, 59, 48, 0.08);
|
||||
border: 1px solid rgba(255, 59, 48, 0.25);
|
||||
}
|
||||
.delete-btn--hover {
|
||||
background: rgba(255, 59, 48, 0.16);
|
||||
border-color: rgba(255, 59, 48, 0.35);
|
||||
}
|
||||
.file-name {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background: #eee;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-inner {
|
||||
height: 100%;
|
||||
background: #007aff;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user