| | |
| | | <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> |
| | |
| | | param: { |
| | | type: [Number, String], |
| | | default: 0 |
| | | }, |
| | | fileType:{ |
| | | type:String, |
| | | default:'file' |
| | | }, |
| | | fileExtension:{ |
| | | type:Array, |
| | | default:[] |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | } |
| | | }, |
| | | 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 = []; |
| | |
| | | }, |
| | | 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 |
| | |
| | | // #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; |
| | | } |
| | |
| | | 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; |
| | | } |
| | |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | 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({ |