1 line
38 KiB
Plaintext
1 line
38 KiB
Plaintext
{"version":3,"sources":["webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload/tn-image-upload.vue?d87b","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload/tn-image-upload.vue?a508","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload/tn-image-upload.vue?3784","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload/tn-image-upload.vue?2210","uni-app:///tuniao-ui/components/tn-image-upload/tn-image-upload.vue","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload/tn-image-upload.vue?2ded","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload/tn-image-upload.vue?458c"],"names":["name","props","fileList","type","default","isUniCloud","action","header","formData","disabled","autoUpload","maxCount","showUploadList","imageMode","previewFullImage","showProgress","deleteable","deleteIcon","deleteBackgroundColor","deleteColor","uploadText","showTips","customBtn","width","height","sizeType","sourceType","multiple","maxSize","limitType","toJson","beforeUpload","beforeRemove","index","computed","data","lists","uploading","watch","handler","val","url","error","progress","immediate","methods","clear","reUpload","selectFile","camera","compressed","chooseFile","uni","count","success","fail","res","file","extension","showToast","upload","retry","uploadFile","that","beforeResponse","task","filePath","cloudPath","onUploadProgress","progressEvent","complete","uploadError","deleteItem","handlerDeleteItem","remove","doPreviewImage","urls","current","checkFileExt","fileExt","noArrowExt"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAwI;AACxI;AACmE;AACL;AACsC;;;AAGpG;AAC+L;AAC/L,gBAAgB,wMAAU;AAC1B,EAAE,qFAAM;AACR,EAAE,sGAAM;AACR,EAAE,+GAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,0GAAU;AACZ;AACA;;AAEA;AACe,gF;;;;;;;;;;;;ACvBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA,aAAa,sQAEN;AACP,KAAK;AACL;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACxEA;AAAA;AAAA;AAAA;AAA2uB,CAAgB,gwBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBCgF/vB;EACAA;EACAC;IACA;IACAC;MACAC;MACAC;QACA;MACA;IACA;IACAC;MACAF;MACAC;IACA;IACA;IACAE;MACAH;MACAC;IACA;IACA;IACAJ;MACAG;MACAC;IACA;IACA;IACAG;MACAJ;MACAC;QACA;MACA;IACA;IACA;IACAI;MACAL;MACAC;QACA;MACA;IACA;IACA;IACAK;MACAN;MACAC;IACA;IACA;IACAM;MACAP;MACAC;IACA;IACA;IACAO;MACAR;MACAC;IACA;IACA;IACAQ;MACAT;MACAC;IACA;IACA;IACAS;MACAV;MACAC;IACA;IACA;IACAU;MACAX;MACAC;IACA;IACA;IACAW;MACAZ;MACAC;IACA;IACA;IACAY;MACAb;MACAC;IACA;IACA;IACAa;MACAd;MACAC;IACA;IACA;IACAc;MACAf;MACAC;IACA;IACA;IACAe;MACAhB;MACAC;IACA;IACA;IACAgB;MACAjB;MACAC;IACA;IACA;IACAiB;MACAlB;MACAC;IACA;IACA;IACAkB;MACAnB;MACAC;IACA;IACA;IACAmB;MACApB;MACAC;IACA;IACA;IACAoB;MACArB;MACAC;IACA;IACA;IACA;IACAqB;MACAtB;MACAC;QACA;MACA;IACA;IACA;IACAsB;MACAvB;MACAC;QACA;MACA;IACA;IACA;IACAuB;MACAxB;MACAC;IACA;IACA;IACAwB;MACAzB;MACAC;IACA;IACA;IACAyB;MACA1B;MACAC;QACA;MACA;IACA;IACA;IACA0B;MACA3B;MACAC;IACA;IACA;IACA2B;MACA5B;MACAC;IACA;IACA;IACA4B;MACA7B;MACAC;IACA;IACA6B;MACA9B;MACAC;IACA;EACA;EACA8B,WAEA;EACAC;IACA;MACAC;MACAC;IACA;EACA;EACAC;IACApC;MACAqC;QAAA;QACAC;UACA;UACA;UACA;UACA;YACA;UACA;UACA;UACA;YAAAC;YAAAC;YAAAC;UAAA;QACA;MACA;MACAC;IACA;IACAR;MACA;IACA;EACA;EACAS;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA,iBAUA,KATAhD;QAAAA;QACAW,WAQA,KARAA;QACAgB,WAOA,KAPAA;QACAC,UAMA,KANAA;QACAH,WAKA,KALAA;QACAW,QAIA,KAJAA;QACAa,SAGA,KAHAA;QACAC,aAEA,KAFAA;QACAxB,aACA,KADAA;MAEA;MACA;MACA;MACAyB;QACAC;UACAC;UACA3B;UACAD;UACA6B;UACAC;QACA;MACA;MACAJ;QACA;QACA;QACAK;UACA;;UAEA;UACA;UACA;YACA;YACA;UACA;YACA;cACA;cACA;cACA;YACA;YACApB;cACAK;cACAE;cACAD;cACAe;cAKAC;YAEA;UACA;QACA;;QACA;QACA;MACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;QACA;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MAAA;QAAA;MAAA;QAAA;QAAA;UAAA;YAAA;cAAA;gBAAA7B;gBACA8B;gBAAA,KACA;kBAAA;kBAAA;gBAAA;gBAAA;cAAA;gBAAA,KACA;kBAAA;kBAAA;gBAAA;gBAAA;cAAA;gBAAA,MAEA9B;kBAAA;kBAAA;gBAAA;gBACA;gBAAA;cAAA;gBAAA,MAIA;kBAAA;kBAAA;gBAAA;gBACA;gBACA;gBAAA;cAAA;gBAAA,MAIA;kBAAA;kBAAA;gBAAA;gBACA;gBACA;gBACA;gBACA;gBACA+B,iGACA;gBAAA,MACA;kBAAA;kBAAA;gBAAA;gBAAA;gBAAA,OACAA;kBACA;gBAAA,CACA;kBACA;kBACA;gBACA;cAAA;gBAAA;gBAAA;cAAA;gBAAA,MACAA;kBAAA;kBAAA;gBAAA;gBAAA,iCAEA;cAAA;gBAAA,KAMA;kBAAA;kBAAA;gBAAA;gBACA;gBACA;gBACA;gBACA;gBACAC;kBACAC;kBACAC;kBAAA;kBACAC;oBACA;sBACAL,wCACAM,iDACA;sBACAN;oBACA;kBACA;kBACAT;oBACA;sBACAS;sBACAA;sBACAA;sBACAA;oBACA;sBACAA;oBACA;kBACA;kBACAR;oBACAQ;kBACA;kBACAO;oBACA;oBACAP;oBACAA;oBACAA;kBACA;gBACA;gBACAA;gBAAA;gBAAA;cAAA;gBAAA,IAEA;kBAAA;kBAAA;gBAAA;gBACA;gBAAA;cAAA;gBAGA;gBACA;gBACA;gBACAE;kBACAxB;kBACAyB;kBACAlE;kBACAQ;kBACAD;kBACA+C;oBACA;oBACA;oBACA;sBACA;oBACA;sBACA;sBACA;sBACA;sBACA;oBACA;kBACA;kBACAC;oBACA;kBACA;kBACAe;oBACA;oBACA;oBACA;oBACA;kBACA;gBACA;gBACA;gBACAL;kBACA;oBACA;oBACA;kBACA;gBACA;cAAA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA;IAEA;IACA;IACAM;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA,uBACA,MACA,iGACA;QAAA;QAAA;UAAA;YAAA;cAAA;gBAAA,MAGA;kBAAA;kBAAA;gBAAA;gBACAR,iGACA;gBAAA,MACA;kBAAA;kBAAA;gBAAA;gBAAA;gBAAA,OACAA;kBACA;kBACA;gBACA;kBACA;gBACA;cAAA;gBAAA;gBAAA;cAAA;gBACA;kBACA;gBACA;kBACA;gBACA;cAAA;gBAAA;gBAAA;cAAA;gBAEA;cAAA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA,CAEA;IACA;IACA;IACAS;MACA;MACA;QACA;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;QAAA;MAAA;MACAvB;QACAwB;QACAC;QACAvB;UACA;QACA;QACAC;UACA;QACA;MACA;IACA;IACA;IACAuB;MACA;MACA;MACA;MACA;MACA;MAMAC;MAEAC;QACA;MACA;MACA;MACA;IACA;EACA;AACA;AAAA,4B;;;;;;;;;;;;;ACtkBA;AAAA;AAAA;AAAA;AAAs5C,CAAgB,m3CAAG,EAAC,C;;;;;;;;;;;ACA16C;AACA,OAAO,KAAU,EAAE,kBAKd","file":"tuniao-ui/components/tn-image-upload/tn-image-upload.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-image-upload.vue?vue&type=template&id=2546f4ca&scoped=true&\"\nvar renderjs\nimport script from \"./tn-image-upload.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-image-upload.vue?vue&type=script&lang=js&\"\nimport style0 from \"./tn-image-upload.vue?vue&type=style&index=0&id=2546f4ca&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\runtime\\\\componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"2546f4ca\",\n null,\n false,\n components,\n renderjs\n)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-image-upload/tn-image-upload.vue\"\nexport default component.exports","export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\templateLoader.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--17-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\template.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-uni-app-loader\\\\page-meta.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload.vue?vue&type=template&id=2546f4ca&scoped=true&\"","var components\ntry {\n components = {\n tnLineProgress: function () {\n return import(\n /* webpackChunkName: \"tuniao-ui/components/tn-line-progress/tn-line-progress\" */ \"@/tuniao-ui/components/tn-line-progress/tn-line-progress.vue\"\n )\n },\n }\n} catch (e) {\n if (\n e.message.indexOf(\"Cannot find module\") !== -1 &&\n e.message.indexOf(\".vue\") !== -1\n ) {\n console.error(e.message)\n console.error(\"1. 排查组件名称拼写是否正确\")\n console.error(\n \"2. 排查组件是否符合 easycom 规范，文档：https://uniapp.dcloud.net.cn/collocation/pages?id=easycom\"\n )\n console.error(\n \"3. 若组件不符合 easycom 规范，需手动引入，并在 components 中注册该组件\"\n )\n } else {\n throw e\n }\n}\nvar render = function () {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n var l0 = _vm.showUploadList\n ? _vm.__map(_vm.lists, function (item, index) {\n var $orig = _vm.__get_orig(item)\n var g0 = _vm.$tn.string.getLengthUnitValue(_vm.width)\n var g1 = _vm.$tn.string.getLengthUnitValue(_vm.height)\n return {\n $orig: $orig,\n g0: g0,\n g1: g1,\n }\n })\n : null\n _vm.$initSSP()\n var g2 = _vm.lists.length\n var g3 =\n _vm.maxCount > g2 && !_vm.customBtn\n ? _vm.$tn.string.getLengthUnitValue(_vm.width)\n : null\n var g4 =\n _vm.maxCount > g2 && !_vm.customBtn\n ? _vm.$tn.string.getLengthUnitValue(_vm.height)\n : null\n _vm.$mp.data = Object.assign(\n {},\n {\n $root: {\n l0: l0,\n g2: g2,\n g3: g3,\n g4: g4,\n },\n }\n )\n if (_vm.$scope.data.scopedSlotsCompiler === \"augmented\") {\n _vm.$setSSP(\"file\", {\n file: _vm.lists,\n })\n }\n _vm.$callSSP()\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\babel-loader\\\\lib\\\\index.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--13-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\script.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\babel-loader\\\\lib\\\\index.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--13-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\script.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload.vue?vue&type=script&lang=js&\"","<template>\r\n <view class=\"tn-image-upload-class tn-image-upload\">\r\n <block v-if=\"showUploadList\">\r\n <view\r\n v-for=\"(item, index) in lists\"\r\n :key=\"index\"\r\n class=\"tn-image-upload__item tn-image-upload__item-preview\"\r\n :style=\"{\r\n width: $tn.string.getLengthUnitValue(width),\r\n height: $tn.string.getLengthUnitValue(height)\r\n }\"\r\n >\r\n <!-- 删除按钮 -->\r\n <view\r\n v-if=\"deleteable\"\r\n class=\"tn-image-upload__item-preview__delete\"\r\n @tap.stop=\"deleteItem(index)\"\r\n :style=\"{\r\n borderTopColor: deleteBackgroundColor\r\n }\"\r\n >\r\n <view\r\n class=\"tn-image-upload__item-preview__delete--icon\"\r\n :class=\"[`tn-icon-${deleteIcon}`]\"\r\n :style=\"{\r\n color: deleteColor\r\n }\"\r\n ></view>\r\n </view>\r\n <!-- 进度条 -->\r\n <tn-line-progress\r\n v-if=\"showProgress && item.progress > 0 && !item.error\"\r\n class=\"tn-image-upload__item-preview__progress\"\r\n :percent=\"item.progress\"\r\n :showPercent=\"false\"\r\n :round=\"false\"\r\n :height=\"8\"\r\n ></tn-line-progress>\r\n <!-- 重试按钮 -->\r\n <view v-if=\"item.error\" class=\"tn-image-upload__item-preview__error-btn\" @tap.stop=\"retry(index)\">点击重试</view>\r\n <!-- 图片信息 -->\r\n <image\r\n class=\"tn-image-upload__item-preview__image\"\r\n :src=\"item.url || item.path\"\r\n :mode=\"imageMode\"\r\n @tap.stop=\"doPreviewImage(item.url || item.path, index)\"\r\n ></image>\r\n </view>\r\n </block>\r\n <!-- <view v-if=\"$slots.file || $slots.$file\" style=\"width: 100%;\">\r\n \r\n </view> -->\r\n <!-- 自定义图片展示列表 -->\r\n <slot name=\"file\" :file=\"lists\"></slot>\r\n \r\n <!-- 添加按钮 -->\r\n <view v-if=\"maxCount > lists.length\" class=\"tn-image-upload__add\" :class=\"{'tn-image-upload__add--custom': customBtn}\" @tap=\"selectFile\">\r\n <!-- 添加按钮 -->\r\n <view\r\n v-if=\"!customBtn\"\r\n class=\"tn-image-upload__item tn-image-upload__item-add\"\r\n hover-class=\"tn-hover-class\"\r\n hover-stay-time=\"150\"\r\n :style=\"{\r\n width: $tn.string.getLengthUnitValue(width),\r\n height: $tn.string.getLengthUnitValue(height)\r\n }\"\r\n >\r\n <view class=\"tn-image-upload__item-add--icon tn-icon-add\"></view>\r\n <view class=\"tn-image-upload__item-add__tips\">{{ uploadText }}</view>\r\n </view>\r\n <!-- 自定义添加按钮 -->\r\n <view>\r\n <slot name=\"addBtn\"></slot>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n name: 'tn-image-upload',\r\n props: {\r\n // 已上传的文件列表\r\n fileList: {\r\n type: Array,\r\n default() {\r\n return []\r\n }\r\n },\r\n\t isUniCloud:{\r\n\t\ttype: Boolean,\r\n\t\tdefault: false\r\n\t },\r\n // 上传图片地址\r\n action: {\r\n type: String,\r\n default: ''\r\n },\r\n // 上传文件的字段名称\r\n name: {\r\n type: String,\r\n default: 'file'\r\n },\r\n // 头部信息\r\n header: {\r\n type: Object,\r\n default() {\r\n return {}\r\n }\r\n },\r\n // 携带的参数\r\n formData: {\r\n type: Object,\r\n default() {\r\n return {}\r\n }\r\n },\r\n // 是否禁用\r\n disabled: {\r\n type: Boolean,\r\n default: false\r\n },\r\n // 是否自动上传\r\n autoUpload: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 最大上传数量\r\n maxCount: {\r\n type: Number,\r\n default: 9\r\n },\r\n // 是否显示组件自带的图片预览\r\n showUploadList: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 预览上传图片的裁剪模式\r\n imageMode: {\r\n type: String,\r\n default: 'aspectFill'\r\n },\r\n // 点击图片是否全屏预览\r\n previewFullImage: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 是否显示进度条\r\n showProgress: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 是否显示删除按钮\r\n deleteable: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 删除按钮图标\r\n deleteIcon: {\r\n type: String,\r\n default: 'close'\r\n },\r\n // 删除按钮的背景颜色\r\n deleteBackgroundColor: {\r\n type: String,\r\n default: ''\r\n },\r\n // 删除按钮的颜色\r\n deleteColor: {\r\n type: String,\r\n default: ''\r\n },\r\n // 上传区域提示文字\r\n uploadText: {\r\n type: String,\r\n default: '选择图片'\r\n },\r\n // 显示toast提示\r\n showTips: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 自定义选择图标按钮\r\n customBtn: {\r\n type: Boolean,\r\n default: false\r\n },\r\n // 预览图片和选择图片区域的宽度\r\n width: {\r\n type: Number,\r\n default: 200\r\n },\r\n // 预览图片和选择图片区域的高度\r\n height: {\r\n type: Number,\r\n default: 200\r\n },\r\n // 选择图片的尺寸\r\n // 参考上传文档 https://uniapp.dcloud.io/api/media/image\r\n sizeType: {\r\n type: Array,\r\n default() {\r\n return ['original', 'compressed']\r\n }\r\n },\r\n // 图片来源\r\n sourceType: {\r\n type: Array,\r\n default() {\r\n return ['album', 'camera']\r\n }\r\n },\r\n // 是否可以多选\r\n multiple: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 文件大小(byte)\r\n maxSize: {\r\n type: Number,\r\n default: 10 * 1024 * 1024\r\n },\r\n // 允许上传的类型\r\n limitType: {\r\n type: Array,\r\n default() {\r\n return ['png','jpg','jpeg','webp','gif','image']\r\n }\r\n },\r\n // 是否自定转换为json\r\n toJson: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 上传前钩子函数，每个文件上传前都会执行\r\n beforeUpload: {\r\n type: Function,\r\n default: null\r\n },\r\n // 删除文件前钩子函数\r\n beforeRemove: {\r\n type: Function,\r\n default: null\r\n },\r\n index: {\r\n type: [Number, String],\r\n default: ''\r\n }\r\n },\r\n computed: {\r\n \r\n },\r\n data() {\r\n return {\r\n lists: [],\r\n uploading: false\r\n }\r\n },\r\n watch: {\r\n fileList: {\r\n handler(val) {\r\n val.map(value => {\r\n // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，\r\n // 会触发watch，导致重新把原来的图片再次添加到this.lists\r\n // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true\r\n let tmp = this.lists.some(listVal => {\r\n return listVal.url === value.url\r\n })\r\n // 如果内部没有这张图片，则添加到内部\r\n !tmp && this.lists.push({ url: value.url, error: false, progress: 100 })\r\n })\r\n },\r\n immediate: true\r\n },\r\n lists(val) {\r\n this.$emit('on-list-change', val, this.index)\r\n }\r\n },\r\n methods: {\r\n // 清除列表\r\n clear() {\r\n this.lists = []\r\n },\r\n // 重新上传队列中上传失败所有文件\r\n reUpload() {\r\n this.uploadFile()\r\n },\r\n // 选择图片\r\n selectFile() {\r\n if (this.disabled) return\r\n const {\r\n name = '',\r\n maxCount,\r\n multiple,\r\n maxSize,\r\n sizeType,\r\n lists,\r\n camera,\r\n compressed,\r\n sourceType\r\n } = this\r\n let chooseFile = null\r\n const newMaxCount = maxCount - lists.length\r\n // 只选择图片的时候使用 chooseImage 来实现\r\n chooseFile = new Promise((resolve, reject) => {\r\n uni.chooseImage({\r\n count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,\r\n sourceType,\r\n sizeType,\r\n success: resolve,\r\n fail: reject\r\n })\r\n })\r\n chooseFile.then(res => {\r\n let file = null\r\n let listOldLength = lists.length\r\n res.tempFiles.map((val, index) => {\r\n\t\t\t if (!this.checkFileExt(val)) return\r\n \r\n // 是否超出最大限制数量\r\n if (!multiple && index >= 1) return\r\n if (val.size > maxSize) {\r\n this.$emit('on-oversize', val, lists, this.index)\r\n this.showToast('超出可允许文件大小')\r\n } else {\r\n if (maxCount <= lists.length) {\r\n this.$emit('on-exceed', val, lists, this.index)\r\n this.showToast('超出最大允许的文件数')\r\n return\r\n }\r\n lists.push({\r\n url: val.path,\r\n progress: 0,\r\n error: false,\r\n file: val,\r\n\t\t\t\t//#ifdef H5\r\n\t\t\t\textension: val.name.substring(val.name.lastIndexOf(\".\")) //图片文件后缀名\r\n\t\t\t\t//#endif\r\n\t\t\t\t//#ifndef H5\r\n\t\t\t\textension: val.path.substring(val.path.lastIndexOf(\".\")) //图片文件后缀名\r\n\t\t\t\t//#endif\r\n })\r\n }\r\n })\r\n this.$emit('on-choose-complete', this.lists, this.index)\r\n if (this.autoUpload) this.uploadFile(listOldLength)\r\n }).catch(err => {\r\n this.$emit('on-choose-fail', err)\r\n })\r\n },\r\n // 提示用户信息\r\n showToast(message, force = false) {\r\n if (this.showTips || force) {\r\n this.$tn.message.toast(message)\r\n }\r\n },\r\n // 手动上传，通过ref进行调用\r\n upload() {\r\n this.uploadFile()\r\n },\r\n // 对失败图片进行再次上传\r\n retry(index) {\r\n this.lists[index].progress = 0\r\n this.lists[index].error = false\r\n this.lists[index].response = null\r\n this.$tn.message.loading('重新上传')\r\n this.uploadFile(index)\r\n },\r\n // 上传文件\r\n async uploadFile(index = 0) {\r\n\t\tvar that=this;\r\n if (this.disabled) return\r\n if (this.uploading) return\r\n // 全部上传完成\r\n if (index >= this.lists.length) {\r\n this.$emit('on-uploaded', this.lists, this.index)\r\n return\r\n }\r\n // 检查是否已经全部上传或者上传中\r\n if (this.lists[index].progress === 100) {\r\n this.lists[index].uploadTask = null\r\n if (this.autoUpload) this.uploadFile(index + 1)\r\n return\r\n }\r\n // 执行before-upload钩子\r\n if (this.beforeUpload && typeof(this.beforeUpload) === 'function') {\r\n // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this\r\n // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文\r\n // 因为upload组件可能会被嵌套在其他组件内，比如tn-form，这时this.$parent其实为tn-form的this，\r\n // 非页面的this，所以这里需要往上历遍，一直寻找到最顶端的$parent，这里用了this.$u.$parent.call(this)\r\n let beforeResponse = this.beforeUpload.bind(this.$tn.$parent.call(this))(index, this.lists)\r\n // 判断是否返回了Promise\r\n if (!!beforeResponse && typeof beforeResponse.then === 'function') {\r\n await beforeResponse.then(res => {\r\n // promise返回成功，不进行操作继续\r\n }).catch(err => {\r\n // 进入catch回调的话，继续下一张\r\n return this.uploadFile(index + 1)\r\n })\r\n } else if (beforeResponse === false) {\r\n // 如果返回flase，继续下一张图片上传\r\n return this.uploadFile(index + 1)\r\n } else {\r\n // 为true的情况，不进行操作\r\n }\r\n }\r\n // 检查上传地址\r\n\t\tif(this.isUniCloud){\r\n\t\t\t//如果是uinCloud\r\n\t\t\tthis.lists[index].error = false\r\n\t\t\tthis.uploading = true\r\n\t\t\t// 创建上传对象\r\n\t\t\tconst task = uniCloud.uploadFile({\r\n\t\t\t\tfilePath: that.lists[index].url,\r\n\t\t\t\tcloudPath: that.$tn.uuid() + that.lists[index].extension, //随机文件名+文件后缀\r\n\t\t\t\tonUploadProgress(progressEvent) {\r\n\t\t\t\t\tif (progressEvent.loaded > 0) {\r\n\t\t\t\t\t\tthat.lists[index].progress = Math.round(\r\n\t\t\t\t\t\t\t(progressEvent.loaded * 100) / progressEvent.total\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t\tthat.$emit('on-progress', progressEvent, index, that.lists, that.index)\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tsuccess(res) {\r\n\t\t\t\t\tif (res.success) {\r\n\t\t\t\t\t\tthat.lists[index].response = res\r\n\t\t\t\t\t\tthat.lists[index].progress = 100\r\n\t\t\t\t\t\tthat.lists[index].error = false\r\n\t\t\t\t\t\tthat.$emit('success', res, index, that.lists, that.index)\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tthat.uploadError(index, res)\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tfail: (err) => {\r\n\t\t\t\t\tthat.uploadError(index, err)\r\n\t\t\t\t},\r\n\t\t\t\tcomplete: (res) => {\r\n\t\t\t\t\t// this.$t.message.closeLoading()\r\n\t\t\t\t\tthat.uploading = false\r\n\t\t\t\t\tthat.uploadFile(index + 1)\r\n\t\t\t\t\tthat.$emit('on-change', res, index, that.lists, that.index)\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\tthat.lists[index].uploadTask = task\r\n\t\t}else{\r\n\t\t\tif (!this.action) {\r\n\t\t\t this.showToast('请配置上传地址', true)\r\n\t\t\t return\r\n\t\t\t}\r\n\t\t\tthis.lists[index].error = false\r\n\t\t\tthis.uploading = true\r\n\t\t\t// 创建上传对象\r\n\t\t\tconst task = uni.uploadFile({\r\n\t\t\t url: this.action,\r\n\t\t\t filePath: this.lists[index].url,\r\n\t\t\t name: this.name,\r\n\t\t\t formData: this.formData,\r\n\t\t\t header: this.header,\r\n\t\t\t success: res => {\r\n\t\t\t // 判断啊是否为json字符串，将其转换为json格式\r\n\t\t\t let data = this.toJson && this.$tn.test.jsonString(res.data) ? JSON.parse(res.data) : res.data\r\n\t\t\t if (![200, 201, 204].includes(res.statusCode)) {\r\n\t\t\t this.uploadError(index, data)\r\n\t\t\t } else {\r\n\t\t\t this.lists[index].response = data\r\n\t\t\t this.lists[index].progress = 100\r\n\t\t\t this.lists[index].error = false\r\n\t\t\t this.$emit('on-success', data, index, this.lists, this.index)\r\n\t\t\t }\r\n\t\t\t },\r\n\t\t\t fail: err => {\r\n\t\t\t this.uploadError(index, err)\r\n\t\t\t },\r\n\t\t\t complete: res => {\r\n\t\t\t this.$tn.message.closeLoading()\r\n\t\t\t this.uploading = false\r\n\t\t\t this.uploadFile(index + 1)\r\n\t\t\t this.$emit('on-change', res, index, this.lists, this.index)\r\n\t\t\t }\r\n\t\t\t})\r\n\t\t\tthis.lists[index].uploadTask = task\r\n\t\t\ttask.onProgressUpdate(res => {\r\n\t\t\t if (res.progress > 0) {\r\n\t\t\t this.lists[index].progress = res.progress\r\n\t\t\t this.$emit('on-progress', res, index, this.lists, this.index)\r\n\t\t\t }\r\n\t\t\t})\r\n\t\t}\r\n },\r\n // 上传失败\r\n uploadError(index, err) {\r\n this.lists[index].progress = 0\r\n this.lists[index].error = true\r\n this.lists[index].response = null\r\n this.showToast('上传失败，请重试')\r\n this.$emit('on-error', err, index, this.lists, this.index)\r\n },\r\n // 删除一个图片\r\n deleteItem(index) {\r\n if (!this.deleteable) return\r\n this.$tn.message.modal(\r\n '提示',\r\n '您确定要删除吗？',\r\n async () => {\r\n // 先检查是否有定义before-remove移除前钩子\r\n // 执行before-remove钩子\r\n if (this.beforeRemove && typeof(this.beforeRemove) === 'function') {\r\n let beforeResponse = this.beforeRemove.bind(this.$tn.$parent.call(this))(index, this.lists)\r\n // 判断是否返回promise \r\n if (!!beforeResponse && typeof beforeResponse.then === 'function') {\r\n await beforeResponse.then(res => {\r\n // promise返回成功不进行操作\r\n this.handlerDeleteItem(index)\r\n }).catch(err => {\r\n this.showToast('删除操作被中断')\r\n })\r\n } else if (beforeResponse === false) {\r\n this.showToast('删除操作被中断')\r\n } else {\r\n this.handlerDeleteItem(index)\r\n }\r\n } else {\r\n this.handlerDeleteItem(index)\r\n }\r\n }, true)\r\n },\r\n // 移除文件操作\r\n handlerDeleteItem(index) {\r\n // 如果文件正在上传中，终止上传任务\r\n if (this.lists[index].progress < 100 && this.lists[index].progress > 0) {\r\n typeof this.lists[index].uploadTask !== 'undefined' && this.lists[index].uploadTask.abort()\r\n }\r\n this.lists.splice(index, 1)\r\n this.$forceUpdate()\r\n this.$emit('on-remove', index, this.lists, this.index)\r\n this.showToast('删除成功')\r\n },\r\n // 移除文件，通过ref手动形式进行调用\r\n remove(index) {\r\n if (!this.deleteable) return\r\n // 判断索引合法\r\n if (index >= 0 && index < this.lists.length) {\r\n this.lists.splice(index, 1)\r\n }\r\n },\r\n // 预览图片\r\n doPreviewImage(url, index) {\r\n if (!this.previewFullImage) return\r\n const images = this.lists.map(item => item.url || item.path)\r\n uni.previewImage({\r\n urls: images,\r\n current: url,\r\n success: () => {\r\n this.$emit('on-preview', url, this.lists, this.index)\r\n },\r\n fail: () => {\r\n this.showToast('预览图片失败')\r\n }\r\n })\r\n },\r\n // 检查文件后缀是否合法\r\n checkFileExt(file) {\r\n // 是否为合法后缀\r\n let noArrowExt = false\r\n // 后缀名\r\n let fileExt = ''\r\n const reg = /.+\\./\r\n \r\n // #ifdef H5\r\n fileExt = file.name.replace(reg, '').toLowerCase()\r\n // #endif\r\n // #ifndef H5\r\n fileExt = file.path.replace(reg, '').toLowerCase()\r\n // #endif\r\n noArrowExt = this.limitType.some(ext => {\r\n return ext.toLowerCase() === fileExt\r\n })\r\n if (!noArrowExt) this.showToast(`不支持${fileExt}格式的文件`)\r\n return noArrowExt\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n .tn-image-upload {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n \r\n &__item {\r\n /* #ifndef APP-NVUE */\r\n display: flex;\r\n /* #endif */\r\n align-items: center;\r\n justify-content: center;\r\n width: 200rpx;\r\n height: 200rpx;\r\n overflow: hidden;\r\n margin: 12rpx;\r\n margin-left: 0;\r\n background-color: $tn-font-holder-color;\r\n position: relative;\r\n border-radius: 10rpx;\r\n \r\n &-preview {\r\n border: 1rpx solid $tn-border-solid-color;\r\n \r\n &__delete {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n z-index: 10;\r\n border-top: 60rpx solid;\r\n border-left: 60rpx solid transparent;\r\n border-top-color: $tn-color-red;\r\n width: 0rpx;\r\n height: 0rpx;\r\n \r\n &--icon {\r\n position: absolute;\r\n top: -50rpx;\r\n right: 6rpx;\r\n color: #FFFFFF;\r\n font-size: 24rpx;\r\n line-height: 1;\r\n }\r\n }\r\n \r\n &__progress {\r\n position: absolute;\r\n width: auto;\r\n bottom: 0rpx;\r\n left: 0rpx;\r\n right: 0rpx;\r\n z-index: 9;\r\n /* #ifdef MP-WEIXIN */\r\n display: inline-flex;\r\n /* #endif */\r\n }\r\n \r\n &__error-btn {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background-color: $tn-color-red;\r\n color: #FFFFFF;\r\n font-size: 20rpx;\r\n padding: 8rpx 0;\r\n text-align: center;\r\n z-index: 9;\r\n line-height: 1;\r\n }\r\n \r\n &__image {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 10rpx;\r\n }\r\n }\r\n \r\n &-add {\r\n flex-direction: column;\r\n color: $tn-content-color;\r\n font-size: 26rpx;\r\n \r\n &--icon {\r\n font-size: 40rpx;\r\n }\r\n \r\n &__tips {\r\n margin-top: 20rpx;\r\n line-height: 40rpx;\r\n }\r\n }\r\n }\r\n \r\n &__add {\r\n width: auto;\r\n display: inline-block;\r\n \r\n &--custom {\r\n width: 100%;\r\n }\r\n }\r\n }\r\n</style>\r\n","import mod from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\mini-css-extract-plugin\\\\dist\\\\loader.js??ref--8-oneOf-1-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\css-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\stylePostLoader.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-2!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\postcss-loader\\\\src\\\\index.js??ref--8-oneOf-1-3!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\sass-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-4!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-5!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload.vue?vue&type=style&index=0&id=2546f4ca&lang=scss&scoped=true&\"; export default mod; export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\mini-css-extract-plugin\\\\dist\\\\loader.js??ref--8-oneOf-1-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\css-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\stylePostLoader.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-2!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\postcss-loader\\\\src\\\\index.js??ref--8-oneOf-1-3!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\sass-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-4!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-5!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload.vue?vue&type=style&index=0&id=2546f4ca&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin\n if(module.hot) {\n // 1715652362409\n var cssReload = require(\"F:/HBuilderX.3.5.3.20220729/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\")(module.id, {\"hmr\":true,\"publicPath\":\"/\",\"locals\":false});\n module.hot.dispose(cssReload);\n module.hot.accept(undefined, cssReload);\n }\n "],"sourceRoot":""} |