-

zhangwei

2025-03-06 02ad32582e3a3b0e6f4b2d1b50593eff1d0558e3

 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>
@@ -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>

@@ -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、uploading、success、error
            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，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)
            //             })
            //          }
            //       }
            //    }

            // })
         },
         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 */