From b934f9f9a59e84a1af40ff139418a7d30dd68402 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期五, 07 三月 2025 17:30:34 +0800
Subject: [PATCH] =
---
src/components/tem/tem-upload-file.vue | 390 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 312 insertions(+), 78 deletions(-)
diff --git a/src/components/tem/tem-upload-file.vue b/src/components/tem/tem-upload-file.vue
index ab0c247..3754037 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>
@@ -44,11 +60,11 @@
props: {
width: {
type: [Number, String],
- default: 200
+ default: 190
},
height: {
type: [Number, String],
- default: 200
+ default: 190
},
fileList: {
type: Array,
@@ -126,6 +142,12 @@
return ['album', 'camera']
}
},
+ isSource: {
+ type: Boolean,
+ default () {
+ return false
+ }
+ },
//鍥剧墖鍚庣紑鍚嶉檺鍒�
suffix: {
type: Array,
@@ -157,6 +179,14 @@
param: {
type: [Number, String],
default: 0
+ },
+ fileType: {
+ type: String,
+ default: 'file'
+ },
+ fileExtension: {
+ type: Array,
+ default: []
}
},
data() {
@@ -164,7 +194,8 @@
urls: [],
tempFiles: [],
//preupload銆乽ploading銆乻uccess銆乪rror
- status: []
+ status: [],
+ formDataNew: {}
};
},
created() {
@@ -186,15 +217,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,77 +306,281 @@
},
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)
- })
- }
- }
+ this.$api.GetToken().then(res => {
+ this.formDataNew = {
+ policy: res.data.policy, //琛ㄥ崟鍩�
+ 'x-oss-signature-version': res.data.x_oss_signature_version, //鎸囧畾绛惧悕鐨勭増鏈拰绠楁硶
+ 'x-oss-credential': res.data.x_oss_credential, //鎸囨槑娲剧敓瀵嗛挜鐨勫弬鏁伴泦
+ 'x-oss-date': res.data.x_oss_date, //璇锋眰鐨勬椂闂�
+ 'x-oss-signature': res.data.signature, //绛惧悕璁よ瘉鎻忚堪淇℃伅
+ 'x-oss-security-token': res.data.security_token, //瀹夊叏浠ょ墝
+ 'success_action_status': "200" //涓婁紶鎴愬姛鍚庡搷搴旂姸鎬佺爜
}
})
+ if (this.isSource) {
+ 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
+ let obj = JSON.parse(JSON.stringify(this.formDataNew))
+ obj.key = this.$util.generateTimestampWithRandom(imageArr[j])
+ this.uploadImage(index, imageArr[j], null, obj).then((res) => {
+ this._success(res)
+ }).catch((res) => {
+ this._error(res)
+ })
+ }
+ }
+ }
+ })
+ } else {
+ wx.chooseMessageFile({
+ count: max === -1 ? 9 : max - this.urls.length,
+ 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}涓枃浠禶);
+ 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]
+ console.log(format, 'eeeeeeeeeeeeee鈥�');
+ // #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(',')} 鏍煎紡锛乣
+ 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
+ let obj = JSON.parse(JSON.stringify(this.formDataNew))
+ obj.key = this.$util.generateTimestampWithRandom(imageArr[j])
+ this.uploadImage(index, imageArr[j], null, obj).then((res) => {
+ this._success(res)
+ }).catch((res) => {
+ this._error(res)
+ })
+ }
+ }
+ },
+ 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)
+ // })
+ // }
+ // }
+ // }
+
+ // })
},
- uploadImage(index, imgUrl, url) {
+ // 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, formDataNew) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: this.url || url,
name: this.name,
header: this.header,
- formData: this.formData,
+ formData: formDataNew,
filePath: imgUrl,
success: (res) => {
if (res.statusCode === 200) {
+ res.data =
+ `https://appimchat.oss-cn-chengdu.aliyuncs.com/${formDataNew.key}`
this.$set(this.status, index, 'success')
resolve({
res,
@@ -497,8 +730,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