-
zhangwei
2025-01-22 9f0f5d7767506658ab5ca47ba8ff4ede423e47e3
src/components/tem/tem-upload-file.vue
@@ -1,11 +1,17 @@
<template>
   <!--本文件由FirstUI授权予四川政采招投标咨询有限公司(会员ID: 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>
@@ -157,6 +163,14 @@
         param: {
            type: [Number, String],
            default: 0
         },
         fileType:{
            type:String,
            default:'file'
         },
         fileExtension:{
            type:Array,
            default:[]
         }
      },
      data() {
@@ -186,15 +200,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 +289,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 +312,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,docx,pdf 格式!`
                           this.toast(text);
                           continue;
                        }
@@ -314,7 +325,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 +346,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,docx,pdf 格式!`
            //                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({