-

zhangwei

2025-03-14 6e961fafc0f921d575772a3c89f2c5cad28c270d

 src/components/tem/tem-upload-file.vue

@@ -27,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="btnText" 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>

@@ -48,13 +58,17 @@
      //    fuiIcon
      // },
      props: {
         btnText: {
            type: String,
            default: '上传'
         },
         width: {
            type: [Number, String],
            default: 200
            default: 190
         },
         height: {
            type: [Number, String],
            default: 200
            default: 190
         },
         fileList: {
            type: Array,
@@ -132,6 +146,12 @@
               return ['album', 'camera']
            }
         },
         isSource: {
            type: Boolean,
            default () {
               return false
            }
         },
         //图片后缀名限制
         suffix: {
            type: Array,
@@ -164,13 +184,13 @@
            type: [Number, String],
            default: 0
         },
         fileType:{
            type:String,
            default:'file'
         fileType: {
            type: String,
            default: 'file'
         },
         fileExtension:{
            type:Array,
            default:[]
         fileExtension: {
            type: Array,
            default: []
         }
      },
      data() {
@@ -178,7 +198,8 @@
            urls: [],
            tempFiles: [],
            //preupload、uploading、success、error
            status: []
            status: [],
            formDataNew: {}
         };
      },
      created() {
@@ -289,66 +310,145 @@
         },
         chooseImage() {
            let max = Number(this.max)
            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]
                        // #endif
            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;

                        // #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);
                        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')
                     }

                     //过滤超出大小限制图片
                     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.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: () => {}
            })
               })
            } 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'],
@@ -412,77 +512,79 @@
         },
         // 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;
         // 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
         //          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
         //             // #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);
         //             if (this.suffix.indexOf(format) == -1) {
         //                let text = `只能上传 ${this.suffix.join(',')} 格式图片！`
         //                this.toast(text);
         //                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)
         //                })
         //             }

         //          //过滤超出大小限制图片
         //          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) {
         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,
@@ -632,8 +734,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 */