123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796 |
- <template>
- <view class="u-upload" v-if="!disabled">
- <view v-if="showUploadList" class="u-list-item u-preview-wrap" :class="{'customPreviewStyle':custom}"
- v-for="(item, index) in lists" :key="index" :style="{
- width: width + 'rpx',
- height: width + 'rpx'
- }">
- <view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
- background: delBgColor,
- }">
- <u-icon class="u-icon" :name="delIcon" :size="delIconSize" :color="delColor"></u-icon>
- </view>
- <view v-if="showProgress && item.progress > 0 && !item.error" class="u-check-icon"
- @tap.stop="deleteItem(index)" :style="{
- background: checkBgColor,
- }">
- <u-icon class="u-icon" :name="checkIcon" :size="checkIconSize" :color="checkColor"></u-icon>
- </view>
-
- <view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
- <image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage"
- :src="item.url || item.path" :mode="imageMode"></image>
- </view>
- <slot name="file" :file="lists"></slot>
- <view style="display: inline-block;" :style="{
- background:custom?customBack:'transparent',
- border:custom?customBorder:'1px solid transparent'
- }" :class="custom?'customStyle':'default'" @tap="selectFile" v-if="maxCount > lists.length">
- <slot name="addBtn"></slot>
- <img v-if="custom&&options.bgc!=''" :src="options.bgc" alt="" class="imgstyle">
- <view class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150" :style="{
- width: width + 'rpx',
- height: width + 'rpx'
- }">
- <image style='width:23px;height:23px;' v-if="custom&&!customBtn"
- src="../static/images/tianjiazhaopian.png" mode=""></image>
-
- <image v-if="custom&&customBtn" :style="{
- width: customBtnWidth + 'px',
- height: customBtnHeight + 'px'
- }" :src="customBtnImage" mode=""></image>
- <image v-if="!custom" style='width:23px;height:23px;' src="../static/images/xiangji-2.png" mode="">
- </image>
- <view v-if="!custom" class="u-add-tips">{{ uploadText }}</view>
- <view v-if="custom" :style="{
- color: customBtnColor,
- 'font-size':customBtnFontSize+'px',
- }" class="u-add-tips">{{ options.text }}</view>
- </view>
- </view>
- <view @click='imgShow=false' v-if="imgShow" class="shade">
- <image style='position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;' :src="url" mode=""></image>
- </view>
-
- </view>
- </template>
- <script>
-
- import uploadImage from '@/components/ossutil/uploadFile.js';
- export default {
- name: 'upload',
- props: {
-
- showUploadList: {
- type: Boolean,
- default: true
- },
-
- action: {
- type: String,
- default: ''
- },
-
- maxCount: {
- type: [String, Number],
- default: 52,
- },
-
- delIconSize: {
- type: String,
- default: '20'
- },
-
- showProgress: {
- type: Boolean,
- default: true
- },
-
- disabled: {
- type: Boolean,
- default: false
- },
-
- imageMode: {
- type: String,
- default: 'aspectFill'
- },
-
- header: {
- type: Object,
- default () {
- return {};
- }
- },
-
- formData: {
- type: Object,
- default () {
- return {};
- }
- },
-
- name: {
- type: String,
- default: 'file'
- },
-
- sizeType: {
- type: Array,
- default () {
- return ['compressed'];
- }
- },
- sourceType: {
- type: Array,
- default () {
- return ['album', 'camera'];
- }
- },
-
- checkBgColor: {
- type: String,
- default: '#2772FB'
- },
-
- checkColor: {
- type: String,
- default: '#fff'
- },
-
- checkIcon: {
- type: String,
- default: 'checkbox-mark'
- },
-
- checkIconSize: {
- type: String,
- default: '20'
- },
-
- previewFullImage: {
- type: Boolean,
- default: true
- },
-
- multiple: {
- type: Boolean,
- default: true
- },
-
- deletable: {
- type: Boolean,
- default: true
- },
-
- maxSize: {
- type: [String, Number],
- default: Number.MAX_VALUE
- },
-
- fileList: {
- type: Array,
- default () {
- return [];
- }
- },
-
- uploadText: {
- type: String,
- default: '选择图片'
- },
-
- autoUpload: {
- type: Boolean,
- default: true
- },
-
- showTips: {
- type: Boolean,
- default: true
- },
-
- customBtn: {
- type: Boolean,
- default: false
- },
- customBtnImage: {
- type: String,
- default: ''
- },
- customBtnWidth: {
- type: Number,
- default: 0
- },
- customBtnHeight: {
- type: Number,
- default: 0
- },
- customBtnColor: {
- type: String,
- default: '#617E8B'
- },
- customBack: {
- type: String,
- default: '#F5F6FA'
- },
- customBorder: {
- type: String,
-
- },
- customBtnFontSize: {
- type: String,
- default: '18'
- },
-
- width: {
- type: [String, Number],
- default: 200
- },
-
- delBgColor: {
- type: String,
- default: '#fa3534'
- },
-
- delColor: {
- type: String,
- default: '#ffffff'
- },
-
- delIcon: {
- type: String,
- default: 'close'
- },
-
- toJson: {
- type: Boolean,
- default: true
- },
-
- beforeUpload: {
- type: Function,
- default: null
- },
- options: {
- type: Object,
- default: null
- },
- custom: {
- type: Boolean,
- default: false
- },
- imgIndex: {
- type: Number,
- default: 0
- }
- },
- mounted() {},
- data() {
- return {
- lists: [],
- isInCount: true,
- uploading: false,
- isSelectFile: false,
- imgShow: false,
- };
- },
- watch: {
- fileList: {
- immediate: true,
- handler(val) {
- val.map(value => {
- this.lists.push({
- url: value.url,
- error: false,
- progress: 100
- });
- });
- }
- }
- },
- methods: {
-
- clear() {
- this.lists = [];
-
- this.$emit('on-list-change', this.lists);
- },
-
- reUpload() {
- this.uploadFile();
- },
-
- selectFile() {
- if (this.disabled) return;
- const {
- name = '', maxCount, multiple, maxSize, sizeType, lists, camera, compressed, maxDuration, sourceType
- } = this;
- let chooseFile = null;
- const newMaxCount = maxCount - lists.length;
-
- chooseFile = new Promise((resolve, reject) => {
- uni.chooseImage({
- count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
- sourceType: sourceType,
- sizeType,
- success: resolve,
- fail: reject
- });
- });
- chooseFile
- .then(res => {
- let file = null;
- let listOldLength = this.lists.length;
- res.tempFiles.map((val, index) => {
-
- if (!multiple && index >= 1) return;
- if (val.size > maxSize) {
- this.$emit('on-oversize', val, this.lists);
- this.showToast('超出允许的文件大小');
- } else {
- if (maxCount <= lists.length) {
- this.$emit('on-exceed', val, this.lists);
- this.showToast('超出最大允许的文件个数');
- return;
- }
- let fileName = '';
- let fileNameLength = '';
- let fileFormat = '';
-
- fileName = val.name.lastIndexOf(".");
- fileNameLength = val.name.length;
- fileFormat = val.name.substring(fileName + 1, fileNameLength).toLowerCase();
-
-
- fileName = val.path.lastIndexOf(".");
- fileNameLength = val.path.length;
- fileFormat = val.path.substring(fileName + 1, fileNameLength).toLowerCase();
-
- lists.push({
- url: val.path,
- fileType: fileFormat,
- progress: 0,
- error: false
- });
-
- this.$emit('on-list-change', this.lists);
- }
- });
-
- this.$emit('on-choose-complete', this.lists);
- if (this.autoUpload) this.uploadFile(listOldLength);
- })
- .catch(error => {
- this.$emit('on-error', error);
- });
- },
-
- showToast(message, force = false) {
- if (this.showTips || force) {
- uni.showToast({
- title: message,
- icon: 'none'
- });
- }
- },
-
- upload() {
- this.uploadFile();
- },
-
- retry(index) {
- this.lists[index].progress = 0;
- this.lists[index].error = false;
- this.lists[index].response = null;
- uni.showLoading({
- title: '重新上传'
- });
- this.uploadFile(index);
- },
-
- async uploadFile(index = 0) {
- if (this.disabled) return;
- if (this.uploading) return;
-
- if (index >= this.lists.length) {
- this.isSelectFile = true
- this.$emit('on-uploaded', this.lists);
- return;
- }
-
- if (!this.action) {
- this.showToast('请配置上传地址', true);
- return;
- }
-
- if (this.lists[index].progress == 100) {
- if (this.autoUpload == false) this.uploadFile(index + 1);
- return;
- }
-
- if (this.beforeUpload && typeof(this.beforeUpload) === 'function') {
-
- let beforeResponse = this.beforeUpload(index, this.lists);
-
- if (!!beforeResponse && typeof beforeResponse.then === 'function') {
- await beforeResponse.then(res => {
-
- }).catch(err => {
-
- return this.uploadFile(index + 1);
- })
- } else if (beforeResponse === false) {
-
- return this.uploadFile(index + 1);
- }
- }
- this.lists[index].error = false;
- this.uploading = true;
- uploadImage(this.lists[index].url, 'appData/',
- result => {
- console.log
-
- this.lists[index].response = result;
- this.lists[index].progress = 100;
- this.lists[index].error = false;
- let data = result
- this.$emit('on-success', data, index, this.lists, this.imgIndex);
- uni.hideLoading();
- this.uploading = false;
- this.uploadFile(index + 1);
- this.$emit('on-change', data, index, this.lists, this.imgIndex);
- }
- )
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- },
-
- uploadError(index, err) {
- this.lists[index].progress = 0;
- this.lists[index].error = true;
- this.lists[index].response = null;
- this.$emit('on-error', err, index, this.lists);
- this.showToast('上传失败,请重试');
- },
-
- deleteItem(index) {
- uni.showModal({
- title: '提示',
- content: '您确定要删除此项吗?',
- success: res => {
- if (res.confirm) {
- this.isSelectFile = false
- if (this.lists[index].process < 100 && this.lists[index].process > 0) {
- typeof this.lists[index].uploadTask != 'undefined' && this.lists[index]
- .uploadTask.abort();
- }
- this.lists.splice(index, 1);
- this.$forceUpdate();
- this.$emit('on-remove', index, this.lists);
- this.showToast('移除成功');
-
- this.$emit('on-list-change', this.lists);
- }
- }
- });
- },
-
- remove(index) {
-
- if (index >= 0 && index < this.lists.length) {
- this.lists.splice(index, 1);
- this.$emit('on-list-change', this.lists);
- }
- },
-
- doPreviewImage(url, index) {
- console.log(this.lists, url, index)
- if (!this.previewFullImage) return;
- const images = this.lists.map(item => item.url || item.path);
- this.url = url
- this.imgShow = true
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- },
-
- checkIsJSON(str) {
- if (typeof str == 'string') {
- try {
- var obj = JSON.parse(str);
- if (typeof obj == 'object' && obj) {
- return true;
- } else {
- return false;
- }
- } catch (e) {
- return false;
- }
- }
- return false;
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- // nvue不能用标签命名样式
- /* #ifndef APP-NVUE */
- image {
- display: inline-block;
- // 解决图片加载时可能会瞬间变形的问题
- will-change: transform;
- }
- view,
- text {
- box-sizing: border-box;
- flex-direction: row;
- }
- /* #endif */
- .u-upload {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- }
- .u-list-item {
- width: 200rpx;
- height: 200rpx;
- overflow: hidden;
- // margin: 10rpx;
- background: rgb(244, 245, 246);
- position: relative;
- border-radius: 10rpx;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- }
- .u-preview-wrap {
- border: 1px solid rgb(235, 236, 238);
- }
- .u-add-wrap {
- flex-direction: column;
- color: $u-content-color;
- font-size: 28rpx;
- }
- .u-add-tips {
- margin-top: 20rpx;
- }
- .u-add-wrap__hover {
- background-color: rgb(235, 236, 238);
- }
- .u-preview-image {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 10rpx;
- }
- .u-delete-icon {
- position: absolute;
- top: 0rpx;
- right: 0rpx;
- z-index: 10;
- background: rgba(17, 26, 52, 0.5);
- border-radius: 0 0 0 10rpx;
- width: 44rpx;
- height: 44rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .u-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .u-progress {
- position: absolute;
- bottom: 10rpx;
- left: 8rpx;
- right: 8rpx;
- z-index: 9;
- width: auto;
- }
- .u-error-btn {
- color: #ffffff;
- background-color: $u-error;
- font-size: 20rpx;
- padding: 4px 0;
- text-align: center;
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 9;
- line-height: 1;
- }
- .customStyleBgc {
- width: 100% !important;
- height: 440rpx !important;
- display: flex !important;
- justify-content: center;
- align-items: center;
- position: relative;
- .u-add-wrap {
- width: 100% !important;
- height: 100% !important;
- background: transparent;
- }
- .u-add-tips {
- font-size: 18px;
- font-weight: 600;
- color: #617E8B;
- }
- }
- .customStyle {
- width: 712rpx !important;
- height: 440rpx !important;
- background: #F5F6FA;
- border-radius: 20rpx;
- // border: 2px dashed #C6CBCE;
- display: flex !important;
- justify-content: center;
- align-items: center;
- position: relative;
- .u-add-wrap {
- width: 100% !important;
- height: 100% !important;
- background: transparent;
- }
- .u-add-tips {
- font-size: 18px;
- font-weight: 600;
- color: #617E8B;
- }
- }
- .customPreviewStyle {
- width: 100% !important;
- height: 440rpx !important;
- }
- .imgstyle {
- width: 100% !important;
- height: 440rpx !important;
- position: absolute;
- }
- .default {
- .u-list-item.u-add-wrap {
- background: #fff;
- border: 1px dashed #AFB3BF;
- }
- }
- .shade {
- background: #000;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 10000;
- }
- .u-check-icon {
- position: absolute;
- bottom: 0rpx;
- left: 0rpx;
- z-index: 10;
- background-color: $u-error;
- border-radius: 0 0 0 10rpx;
- width: 44rpx;
- height: 44rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- </style>
|