From e5a77d6a551d13e4cf74624b31b0fa3e328b304d Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期四, 23 一月 2025 17:23:39 +0800
Subject: [PATCH] -
---
src/components/tem/tem-upload-file.vue | 198 +++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 172 insertions(+), 26 deletions(-)
diff --git a/src/components/tem/tem-upload-file.vue b/src/components/tem/tem-upload-file.vue
index ab0c247..314046d 100644
--- a/src/components/tem/tem-upload-file.vue
+++ b/src/components/tem/tem-upload-file.vue
@@ -1,11 +1,17 @@
<template>
<!--鏈枃浠剁敱FirstUI鎺堟潈浜堝洓宸濇斂閲囨嫑鎶曟爣鍜ㄨ鏈夐檺鍏徃锛堜細鍛業D锛� 1 63锛岃惀涓氭墽鐓у彿锛�9 1 51 0 1313 3 2 0061 9 3K锛変笓鐢紝璇峰皧閲嶇煡璇嗕骇鏉冿紝鍕跨涓嬩紶鎾紝杩濊�呰拷绌舵硶寰嬭矗浠汇��-->
<view class="fui-upload__wrap">
- <view class="fui-upload__item" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
+ <view class="fui-upload__item"
+ :style="$util.checkFileExtensions(item)?'':{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
v-for="(item,index) in urls" :key="index">
- <image src="/static/WPS.png" mode="aspectFill" @tap.sto='showTip' :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}" v-if="checkFileExtensions(item)"></image>
- <image v-else class="fui-upload__img" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
- :src="item" mode="aspectFill" @tap.stop="previewImage(index)"></image>
+ <u-tag :text="item.match(/\/([^\/]*)$/)[1]" size="mini" v-if="$util.checkFileExtensions(item)"
+ @click.stop='showTip(item)'></u-tag>
+ <!-- // <image src="/static/WPS.png" mode="aspectFill" @tap.stop='showTip'
+ // :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
+ // v-if="checkFileExtensions(item)"></image> -->
+ <image v-else class="fui-upload__img"
+ :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}" :src="item" mode="aspectFill"
+ @tap.stop="previewImage(index)"></image>
<view class="fui-upload__mask" v-if="status[index]!=='success' && status[index]!=='preupload' ">
<fui-icon name="warning-fill" color="#fff" :size="48" v-if="status[index]==='error'"></fui-icon>
<text class="fui-reupload__btn" @tap.stop="reUpload(index)" v-if="status[index]==='error'">閲嶆柊涓婁紶</text>
@@ -21,14 +27,24 @@
<fui-icon name="close" color="#fff" :size="32"></fui-icon>
</view>
</view>
+
<view class="fui-upload__item"
+ :class="[borderColor && borderColor!==true?'fui-upload__border':'fui-upload__noborder']"
+ :style="{width:width+'rpx',borderRadius:radius+'rpx',borderColor:borderColor,borderStyle:borderSytle}"
+ v-if="showAdd" @tap.stop="chooseImage">
+ <slot>
+ <u-button type="primary" text="涓婁紶" size="small"></u-button>
+ <!-- <fui-icon name="plus" :size="addSize" :color="addColor"></fui-icon> -->
+ </slot>
+ </view>
+ <!-- <view class="fui-upload__item"
:class="[borderColor && borderColor!==true?'fui-upload__border':'fui-upload__noborder']"
:style="{width:width+'rpx',height:height+'rpx',background:background,borderRadius:radius+'rpx',borderColor:borderColor,borderStyle:borderSytle}"
v-if="showAdd" @tap.stop="chooseImage">
<slot>
<fui-icon name="plus" :size="addSize" :color="addColor"></fui-icon>
</slot>
- </view>
+ </view> -->
</view>
</template>
@@ -157,6 +173,14 @@
param: {
type: [Number, String],
default: 0
+ },
+ fileType: {
+ type: String,
+ default: 'file'
+ },
+ fileExtension: {
+ type: Array,
+ default: []
}
},
data() {
@@ -164,7 +188,7 @@
urls: [],
tempFiles: [],
//preupload銆乽ploading銆乻uccess銆乪rror
- status: []
+ status: [],
};
},
created() {
@@ -186,15 +210,13 @@
}
},
methods: {
- showTip(){
- this.$util.showToast({
- title: "鏂囦欢绫诲瀷涓嶆敮鎸侀瑙堬紒",
- })
+ showTip(src) {
+ // this.$util.showToast({
+ // title: "鏂囦欢绫诲瀷涓嶆敮鎸侀瑙堬紒",
+ // })
+ this.$util.previewWechat(src)
},
- checkFileExtensions(str) {
- const extensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx'];
- return extensions.some(extension => str.includes(extension));
- },
+
initData(urls) {
urls = urls || []
this.status = [];
@@ -277,21 +299,19 @@
},
chooseImage() {
let max = Number(this.max)
- uni.chooseImage({
+ wx.chooseMessageFile({
count: max === -1 ? 9 : max - this.urls.length,
- sizeType: this.sizeType,
- sourceType: this.sourceType,
+ type: this.fileType,
success: (e) => {
let imageArr = [];
for (let i = 0; i < e.tempFiles.length; i++) {
let len = this.urls.length;
if (len >= max && max !== -1) {
- this.toast(`鏈�澶氬彲涓婁紶${max}寮犲浘鐗嘸);
+ this.toast(`鏈�澶氬彲涓婁紶${max}涓枃浠禶);
break;
}
- //杩囨护鍥剧墖绫诲瀷
+ //杩囨护鏂囦欢绫诲瀷
let path = e.tempFiles[i].path;
-
if (this.suffix.length > 0) {
let format = ""
// #ifdef H5
@@ -302,9 +322,10 @@
// #ifndef H5
format = path.split(".")[(path.split(".")).length - 1];
// #endif
-
+ console.log(format);
if (this.suffix.indexOf(format) == -1) {
- let text = `鍙兘涓婁紶 ${this.suffix.join(',')} 鏍煎紡鍥剧墖锛乣
+ // let text = `鍙兘涓婁紶 ${this.suffix.join(',')} 鏍煎紡锛乣
+ let text = `鍙兘涓婁紶 doc锛宒ocx锛宲df 鏍煎紡锛乣
this.toast(text);
continue;
}
@@ -314,7 +335,7 @@
let size = e.tempFiles[i].size;
if (Number(this.size) * 1024 * 1024 < size) {
- let err = `鍗曞紶鍥剧墖澶у皬涓嶈兘瓒呰繃锛�${this.size}MB`
+ let err = `鏂囦欢澶у皬涓嶈兘瓒呰繃锛�${this.size}MB`
this.toast(err);
continue;
}
@@ -335,9 +356,133 @@
})
}
}
- }
+ },
+ fail: () => {}
})
+ // uni.chooseFile({
+ // count: max === -1 ? 9 : max - this.urls.length,
+ // extension: ['.doc', '.pdf', '.docx'],
+ // success: (e) => {
+ // let imageArr = [];
+ // for (let i = 0; i < e.tempFiles.length; i++) {
+ // let len = this.urls.length;
+ // if (len >= max && max !== -1) {
+ // this.toast(`鏈�澶氬彲涓婁紶${max}涓枃浠禶);
+ // break;
+ // }
+ // //杩囨护鏂囦欢绫诲瀷
+ // let path = e.tempFiles[i].path;
+ // if (this.suffix.length > 0) {
+ // let format = ""
+ // // #ifdef H5
+ // let type = e.tempFiles[i].type;
+ // format = type.split('/')[1]
+ // // #endif
+
+ // // #ifndef H5
+ // format = path.split(".")[(path.split(".")).length - 1];
+ // // #endif
+ // console.log(format);
+ // if (this.suffix.indexOf(format) == -1) {
+ // // let text = `鍙兘涓婁紶 ${this.suffix.join(',')} 鏍煎紡锛乣
+ // let text = `鍙兘涓婁紶 doc锛宒ocx锛宲df 鏍煎紡锛乣
+ // this.toast(text);
+ // continue;
+ // }
+ // }
+
+ // //杩囨护瓒呭嚭澶у皬闄愬埗鍥剧墖
+ // let size = e.tempFiles[i].size;
+
+ // if (Number(this.size) * 1024 * 1024 < size) {
+ // let err = `鏂囦欢澶у皬涓嶈兘瓒呰繃锛�${this.size}MB`
+ // this.toast(err);
+ // continue;
+ // }
+ // imageArr.push(path)
+ // this.urls.push(path)
+ // this.tempFiles.push(e.tempFiles[i])
+ // this.status.push(this.immediate ? 'uploading' : 'preupload')
+ // }
+ // this.onComplete('choose')
+ // let start = this.urls.length - imageArr.length
+ // if (this.immediate) {
+ // for (let j = 0; j < imageArr.length; j++) {
+ // let index = start + j
+ // this.uploadImage(index, imageArr[j]).then((res) => {
+ // this._success(res)
+ // }).catch((res) => {
+ // this._error(res)
+ // })
+ // }
+ // }
+ // }
+
+ // })
},
+ // chooseImage() {
+ // let max = Number(this.max)
+ // uni.chooseImage({
+ // count: max === -1 ? 9 : max - this.urls.length,
+ // sizeType: this.sizeType,
+ // sourceType: this.sourceType,
+ // success: (e) => {
+ // let imageArr = [];
+ // for (let i = 0; i < e.tempFiles.length; i++) {
+ // let len = this.urls.length;
+ // if (len >= max && max !== -1) {
+ // this.toast(`鏈�澶氬彲涓婁紶${max}寮犲浘鐗嘸);
+ // break;
+ // }
+ // //杩囨护鍥剧墖绫诲瀷
+ // let path = e.tempFiles[i].path;
+
+ // if (this.suffix.length > 0) {
+ // let format = ""
+ // // #ifdef H5
+ // let type = e.tempFiles[i].type;
+ // format = type.split('/')[1]
+ // // #endif
+
+ // // #ifndef H5
+ // format = path.split(".")[(path.split(".")).length - 1];
+ // // #endif
+
+ // if (this.suffix.indexOf(format) == -1) {
+ // let text = `鍙兘涓婁紶 ${this.suffix.join(',')} 鏍煎紡鍥剧墖锛乣
+ // this.toast(text);
+ // continue;
+ // }
+ // }
+
+ // //杩囨护瓒呭嚭澶у皬闄愬埗鍥剧墖
+ // let size = e.tempFiles[i].size;
+
+ // if (Number(this.size) * 1024 * 1024 < size) {
+ // let err = `鍗曞紶鍥剧墖澶у皬涓嶈兘瓒呰繃锛�${this.size}MB`
+ // this.toast(err);
+ // continue;
+ // }
+ // imageArr.push(path)
+ // this.urls.push(path)
+ // this.tempFiles.push(e.tempFiles[i])
+ // this.status.push(this.immediate ? 'uploading' : 'preupload')
+ // }
+ // this.onComplete('choose')
+ // let start = this.urls.length - imageArr.length
+ // if (this.immediate) {
+ // for (let j = 0; j < imageArr.length; j++) {
+ // let index = start + j
+ // this.uploadImage(index, imageArr[j]).then((res) => {
+ // this._success(res)
+ // }).catch((res) => {
+ // this._error(res)
+ // })
+ // }
+ // }
+ // }
+ // })
+ // },
uploadImage(index, imgUrl, url) {
return new Promise((resolve, reject) => {
uni.uploadFile({
@@ -497,8 +642,9 @@
/* #endif */
align-items: center;
justify-content: center;
- margin-right: 20rpx;
- margin-bottom: 20rpx;
+ /* margin-right: 20rpx;
+ margin-bottom: 20rpx; */
+ margin: 10rpx 10rpx 10rpx 0;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
--
Gitblit v1.9.1