imgUploadcopy.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709
  1. <template>
  2. <view class="w-100 imgupload">
  3. <view class="w-100 flex_wrap">
  4. <view class="imgs-view" v-for="(v,i) in imgArray" :key="i">
  5. <image @click="preview(v,i)" :src="v.url"></image>
  6. <view class="del-btn" @click="delImg(i)">
  7. <image :src="config.delIcon||'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5UlEQVQ4T2NkQAP3fTXs//1njPvP8N+BkYFBCST9n4HhHiMD4wEmxv+LFDffOIishRGZc89HY9Z/BoZUdEPRNMxW2nIjDSYGN+COj8YORgYGd3yaYXL/GRh2qmy54QHigw0gxmZ0gxkZGMAuYYT4meEAMTajq2FiZHBgvOujOZeB4X8SOQYwMDDOY7zjo3EXFtqkGgKOnbs+Gv9hGsVKexm4jG3xmvPt7GGGV93FcDUoBvD7xTGwyijiNeD3k/sMHzctQhhABS9QGIgURyPFCQkWGhQlZZghxCRpWBLGyEwwAVKzMwB5V2gPAYXmLgAAAABJRU5ErkJggg=='"></image>
  8. </view>
  9. <view class="uploading flex_xy_center" v-if="!v.upload&&loading&&startUpload">
  10. <view>
  11. <image :src="config.loadIcon||'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACIUlEQVRIS72Xu4oVQRCGv/8VXAxE30ANxGuoKAhGKigGXmHRBzAwUFFxE8EFI0ER74ku4iaCgoKBgcvuYuIDCF4S0cz4l1pmlnNmemZ69+ychubAqer6qntq+q8RIwzbBn4AP4FPwIykuZyQynFq8inAVXOAH0q63xa7D3DJWwTuSHqeSqBPcMm7LulGFT4OcDBr8FHBW4DNQPzGPNzyXI9LmintI4GrENtngWlgXUMCy/A1BZcw2++B/Qn4oqQd8X8v4Ahs+wlwOgG/EK9ab+AC/h3YVIHPS9rVN/gg8Dax6329gotdv05U+91xgG8CV2rHPcpdnbPW9lHgVcX32zh2vLFQsEH2PzUozFZJX3N21OVjewPwq+K3BE6V/AlJL7qC5thtHwLe1I7a9mdgd8UwJelqTuAuH9uXgalacdm+DVysGGYlHekKmmO3HYUVBTY4puOoY7ex6+o4J+lxTvAmn0I0HiXse5aquuG4/0qaGBH8J6FUc5KWweeBewnIB0kHVgNvUahhkbC9AGxPQJ5KOrMSeIsy1WXR9kngWQMgWthJSe/aErAdovAgoUjlslNl8zd0c9m+Fv1RS/BZIC6WL0DZP0dxbstofYb6rtqVmQFfyamXvnnNnu1jwMvVEBJrhpq80t4oEgX8UkPB5eQUDf2twc5ycFGnOtmOV20S2JlDA+ajwNbsE8b2XiAeQSSwvpiRy+9iBjA+2j7mJPgfs4zO01msgbsAAAAASUVORK5CYII='"></image>
  12. <view class="upload-txt">{{config.loadText||"上传中..."}}</view>
  13. </view>
  14. </view>
  15. <view class="result" v-if="config.resultTip&&v.upload">
  16. <label class="success" v-if="v.result===true">上传成功</label>
  17. <label class="error" v-if="v.result===false">上传失败</label>
  18. </view>
  19. </view>
  20. <view v-if="imgArray.length<imgCount" class="upload-img-view flex_xy_center" @click="upPhoto">
  21. <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAArklEQVRIS2NkGCDAOED2Mgw9i9vb2xVAoVVZWfmAnFAj28ddXV33QRaWlZUp0tvi/1CLyXI8WZpAFnZ1dY1aTFJUjwY10cE1mriIDiqoQpTEBSoGmZmZ9zMwMICLQyqC08zMzDHFxcW3YGYODotJ8eFo4iIltEBqR0suokNsNHERHVTYSi5SNA9kUJ+CtrnMSHEw1iKTFAN6e3vVQOqRy19S9JOdj0mxBJvakWcxAFpiZB+QSLWnAAAAAElFTkSuQmCC"></image>
  22. </view>
  23. </view>
  24. <view v-if="!closeTip&&!tipObj.prompt" class="imgupload__tip">* 最多上传{{imgCount}}张图片(<label> {{imgArray.length}}
  25. </label>/{{imgCount}})</view>
  26. <view class="imgupload__tip" :style="{color:tipObj.typeColor}" v-show="tipObj.prompt || tipObj.must">*{{tipObj.prompt}}</view>
  27. </view>
  28. </template>
  29. <script>
  30. export default {
  31. name: 'imgUpload',
  32. props: {
  33. imgArr: { //图片数组
  34. type: [Array],
  35. },
  36. uploadImgCount: { //一次上传图片数
  37. type: String,
  38. default: '3'
  39. },
  40. imgCount: { //可上传图片总数
  41. type: String,
  42. default: '3'
  43. },
  44. imgSize: { //图片大小 单位M
  45. type: Number,
  46. default: 2
  47. },
  48. formData: {
  49. type: Object,
  50. default: function() {
  51. return {}
  52. }
  53. },
  54. imgType: { //如果是小程序,这个值则没用作用
  55. type: [Array],
  56. default: function() {
  57. return ['jpeg', 'png', 'jpg']
  58. }
  59. },
  60. closeTip: {
  61. type: Boolean,
  62. default: false
  63. },
  64. loading: {
  65. type: Boolean,
  66. default: true
  67. },
  68. url: { //上传图片Url
  69. type: String,
  70. },
  71. async: {
  72. type: Boolean,
  73. default: false
  74. },
  75. header: {
  76. type: Array,
  77. default: function() {
  78. return []
  79. }
  80. },
  81. previewMany: { //多图预览
  82. type: Boolean,
  83. default: false
  84. },
  85. pressImg: { //压缩图片 H5暂不支持压缩api
  86. type: Number,
  87. default: -1
  88. },
  89. config: {
  90. type: Object,
  91. default: function() {
  92. return {
  93. delIcon: '', //删除图片icon
  94. resultTip: true, //结果提示
  95. resultType: '1', //结果展示类型
  96. loadIcon: '', //加载时的图标
  97. loadText: '' //加载时的文字
  98. }
  99. }
  100. }
  101. },
  102. data() {
  103. return {
  104. imgArray: [],
  105. canUpCount: '',
  106. startUpload: false,
  107. tipObj: {
  108. prompt: '',
  109. typeColor: '#009100',
  110. must: false, //必须要存在的时候
  111. success: '#009100', //成功-#009100; 可自定义修改
  112. warning: '#bb9300', // 警告 -#bb9300; 可自定义修改
  113. error: '#FF0000' // 失败--#FF0000; 可自定义修改
  114. },
  115. headers: {},
  116. curPlatform: '',
  117. currIndex: null
  118. }
  119. },
  120. created() {
  121. this.imgArray = this.imgArr || [];
  122. this.changeImgArr(true);
  123. this.canUpCount = Number(this.uploadImgCount);
  124. if (this.url) {
  125. this.tipObj.prompt = "";
  126. } else {
  127. this.tipObj.prompt = "你没有传入上传url,请检查传入参数";
  128. this.tipObj.typeColor = this.tipObj.error;
  129. }
  130. this.changeHeader(this.header);
  131. },
  132. watch: {
  133. imgArr(n, o) {
  134. this.imgArray = n || [];
  135. this.changeImgArr(true);
  136. },
  137. imgCount(n, o) {
  138. this.uploadImgCount = n;
  139. this.canUpCount = Number(this.uploadImgCount);
  140. },
  141. url(n, o) {
  142. if (n) {
  143. this.tipObj.prompt = "";
  144. } else {
  145. this.tipObj.prompt = "你没有传入上传url,请检查传入参数";
  146. this.tipObj.typeColor = this.tipObj.error;
  147. }
  148. },
  149. header(n, o) {
  150. this.changeHeader(n);
  151. }
  152. },
  153. methods: {
  154. upPhoto() {
  155. let that = this;
  156. if (!that.url) {
  157. that.tipObj.prompt = "你没有传入上传url,请检查!";
  158. that.tipObj.typeColor = that.tipObj.error;
  159. return;
  160. }
  161. if (Number(that.imgCount - that.imgArray.length) < Number(that.uploadImgCount)) {
  162. that.canUpCount = Number(that.imgCount - that.imgArray.length);
  163. }
  164. if(!that.tipObj.must){
  165. that.tipObj.prompt = '';
  166. }
  167. that.tipObj.must = false;
  168. uni.showActionSheet({
  169. itemList: ['拍照上传', '从相册中选择'],
  170. success: function(res) {
  171. if (res.tapIndex == 0) {
  172. uni.chooseImage({
  173. count: Number(that.canUpCount),
  174. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  175. sourceType: ['camera'], //从相册选择
  176. success: function(res) {
  177. if (res) {
  178. if (res.tempFiles) {
  179. for (let item of res.tempFiles) {
  180. if (item.size > (that.imgSize * 1024 * 1024)) {
  181. uni.showToast({
  182. title: `图片不能大于${that.imgSize}M`,
  183. icon: 'none'
  184. })
  185. return false;
  186. }
  187. if (item.type) {
  188. let r = that.imgType.some(v => {
  189. let type = item.type.split('/');
  190. if (type.length)
  191. return (v === type[1]);
  192. });
  193. if (!r) {
  194. uni.showToast({
  195. title: `只允许上传${that.imgType}的类型`,
  196. icon: 'none'
  197. })
  198. return false;
  199. }
  200. }
  201. }
  202. }
  203. that.currIndex = that.imgArray.length;
  204. that.imgArray = [...that.imgArray, ...res.tempFilePaths];
  205. that.changeImgArr(false);
  206. if (that.pressImg >= 0) {
  207. //存在图片压缩 开启图片压缩
  208. if (that.checkPlatform()) {
  209. // H5环境下不支持
  210. that.pressImages();
  211. }
  212. } else {
  213. //正常异步提交
  214. that.hasAysnc();
  215. }
  216. }
  217. }
  218. });
  219. } else if (res.tapIndex == 1) {
  220. uni.chooseImage({
  221. count: Number(that.canUpCount),
  222. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  223. sourceType: ['album'], //从相册选择
  224. success: function(res) {
  225. if (res) {
  226. if (res.tempFiles) {
  227. for (let item of res.tempFiles) {
  228. if (item.size > (that.imgSize * 1024 * 1024)) {
  229. uni.showToast({
  230. title: `图片不能大于${that.imgSize}M`,
  231. icon: 'none'
  232. })
  233. return false;
  234. }
  235. if (item.type) {
  236. let r = that.imgType.some(v => {
  237. let type = item.type.split('/');
  238. if (type.length)
  239. return (v === type[1]);
  240. });
  241. if (!r) {
  242. uni.showToast({
  243. title: `只允许上传${that.imgType}的类型`,
  244. icon: 'none'
  245. })
  246. return false;
  247. }
  248. }
  249. }
  250. }
  251. that.currIndex = that.imgArray.length;
  252. that.imgArray = [...that.imgArray, ...res.tempFilePaths];
  253. that.changeImgArr(false);
  254. if (that.pressImg >= 0) {
  255. //存在图片压缩 开启图片压缩
  256. if (that.checkPlatform()) {
  257. // H5环境下不支持
  258. that.pressImages();
  259. }
  260. } else {
  261. //正常异步提交
  262. that.hasAysnc();
  263. }
  264. }
  265. }
  266. });
  267. }
  268. },
  269. fail: function(res) {
  270. console.log(res.errMsg);
  271. }
  272. });
  273. },
  274. preview(obj, index) {
  275. if (this.previewMany) {
  276. let urls = [];
  277. urls.push(obj.url)
  278. this.imgArray.map(item => {
  279. if (obj.id != item.id) {
  280. urls.push(item.url);
  281. }
  282. })
  283. uni.previewImage({
  284. urls: urls
  285. });
  286. } else {
  287. // 预览图片(单张)
  288. uni.previewImage({
  289. urls: [obj.url]
  290. });
  291. }
  292. },
  293. changeImgArr(type) {
  294. for (let index in this.imgArray) {
  295. let item = this.imgArray[index];
  296. if (!item.upload) {
  297. if (item.upload === false) {
  298. this.imgArray[index].url = item.url;
  299. } else {
  300. this.imgArray[index] = {
  301. id: index,
  302. upload: type,
  303. url: item,
  304. result: null,
  305. }
  306. }
  307. }
  308. }
  309. },
  310. pressImages() {
  311. const _this = this;
  312. let success = 0;
  313. let completeNum = 0;
  314. for (let item of _this.imgArray) {
  315. uni.compressImage({
  316. src: item.url,
  317. quality: _this.pressImg,
  318. success: res => {
  319. ++success;
  320. item.pressUrl = res.tempFilePath;
  321. },
  322. error: res => {
  323. console.log(res);
  324. },
  325. complete: res => {
  326. ++completeNum;
  327. //等待全部压缩完成
  328. if (completeNum === _this.imgArray.length) {
  329. console.log(success);
  330. if (success >= _this.imgArray.length) {
  331. _this.tipObj.prompt = "全部压缩成功!";
  332. _this.tipObj.typeColor = _this.tipObj.success;
  333. } else {
  334. let errorNum = _this.imgArray.length - success;
  335. _this.tipObj.prompt = `${errorNum}个文件压缩失败`;
  336. _this.tipObj.typeColor = _this.tipObj.warning;
  337. }
  338. console.log('res', _this.imgArray);
  339. if (_this.async) {
  340. //直接上传
  341. _this.asyncUpload();
  342. }
  343. }
  344. }
  345. });
  346. }
  347. },
  348. asyncUpload() {
  349. const _this = this;
  350. if (_this.imgArray.length) {
  351. _this.startUpload = true;
  352. _this.tipObj.prompt = "";
  353. for (let i = _this.currIndex; i < _this.imgArray.length; i++) {
  354. let item = _this.imgArray[i];
  355. let subUrl = _this.pressImg >= 0 ? item.pressUrl : item.url;
  356. uni.uploadFile({
  357. url: _this.url,
  358. filePath: subUrl,
  359. name: 'file',
  360. header: _this.headers,
  361. formData: _this.formData,
  362. success: (uploadFileRes) => {
  363. if (uploadFileRes.statusCode == 200) {
  364. let res = JSON.parse(uploadFileRes.data);
  365. /*注意 如果返回的结果字段不一样,请在这里做修改[res.code]*/
  366. if (res.code === 0 || res.code === '0') {
  367. //成功情况下
  368. item.result = true;
  369. res.code = 0;
  370. } else {
  371. item.result = false;
  372. _this.tipObj.prompt = "上传失败,请检查!";
  373. _this.tipObj.typeColor = _this.tipObj.error;
  374. }
  375. _this.$emit("result", res);
  376. } else {
  377. item.result = false;
  378. _this.$emit("result", uploadFileRes);
  379. }
  380. },
  381. fail: (e) => {
  382. item.result = false;
  383. _this.tipObj.prompt = "上传失败,请检查!";
  384. _this.tipObj.typeColor = _this.tipObj.error;
  385. console.log(e);
  386. },
  387. complete: () => {
  388. item.upload = true;
  389. _this.startUpload = false;
  390. _this.$forceUpdate();
  391. }
  392. });
  393. }
  394. }
  395. },
  396. delImg(i) {
  397. const _this = this;
  398. uni.showModal({
  399. title: '提示',
  400. content: '是否删除这张照片?',
  401. success: function(res) {
  402. if (res.confirm) {
  403. _this.imgArray.splice(i, 1);
  404. if (_this.async) {
  405. _this.$emit("delImg", i);
  406. }
  407. } else if (res.cancel) {}
  408. }
  409. });
  410. },
  411. upload(callback) {
  412. const _this = this;
  413. if (!_this.async) {
  414. _this.tipObj.prompt = "";
  415. if (_this.imgArray.length) {
  416. this.startUpload = true;
  417. let successNum = 0;
  418. let urlArr = [];
  419. for (let item of _this.imgArray) {
  420. _this.uploadImg(item, res => {
  421. /*注意 如果返回的结果字段不一样,请在这里做修改[res.code]*/
  422. if (res.code == 0) {
  423. successNum++;
  424. urlArr.push(res.url); /*需要线上图片地址[res.fileVo]*/
  425. item.result = true;
  426. } else {
  427. urlArr.push(res);
  428. item.result = false;
  429. }
  430. item.upload = true;
  431. _this.$forceUpdate();
  432. _this.tipObj.prompt = "正在上传...(成功" + successNum + "张/" + urlArr.length + "张)";
  433. _this.tipObj.typeColor = _this.tipObj.success;
  434. if (urlArr.length == _this.imgArray.length) {
  435. _this.tipObj.prompt = "已全部上传完成!";
  436. _this.tipObj.typeColor = _this.tipObj.success;
  437. if (successNum > 0) {
  438. _this.startUpload = false;
  439. callback(_this.result(urlArr, successNum));
  440. } else {
  441. _this.startUpload = false;
  442. callback(urlArr); //错误的返回
  443. }
  444. }
  445. });
  446. }
  447. } else {
  448. _this.tipObj.prompt = '请先选择图片后上传!';
  449. _this.tipObj.typeColor = _this.tipObj.warning;
  450. callback({
  451. result:'warning',
  452. code:400
  453. });
  454. }
  455. } else {
  456. _this.tipObj.prompt = '在异步模式下无法调用upload方法。';
  457. _this.tipObj.typeColor = _this.tipObj.warning;
  458. }
  459. },
  460. result(urlArr, successNum) {
  461. let result = {
  462. result: 'success',
  463. code: 0,
  464. urlArray: urlArr,
  465. success: successNum
  466. }
  467. return result;
  468. },
  469. uploadImg(item, callback) {
  470. const _this = this;
  471. let subUrl = _this.pressImg >= 0 ? item.pressUrl : item.url;
  472. uni.uploadFile({
  473. url: _this.url,
  474. filePath: subUrl,
  475. formData: _this.formData,
  476. header: _this.headers,
  477. name: 'file',
  478. success: (uploadFileRes) => {
  479. if (uploadFileRes) {
  480. let res = JSON.parse(uploadFileRes.data);
  481. res.resCode = 0;
  482. callback(res);
  483. }
  484. },
  485. fail: (e) => {
  486. callback({
  487. resCode: 500,
  488. msg: '图片上传失败',
  489. localUrl: item,
  490. reason: e
  491. });
  492. }
  493. });
  494. },
  495. changeHeader(header) {
  496. const _this = this;
  497. if (Array.isArray(header)) {
  498. for (let item of header) {
  499. for (let key in item) {
  500. _this.headers[key] = item[key];
  501. }
  502. }
  503. } else {
  504. _this.tipObj.prompt = '请使用数组格式的Header传参';
  505. _this.tipObj.typeColor = _this.tipObj.error;
  506. }
  507. },
  508. //是异步方法的提交
  509. hasAysnc() {
  510. const that = this;
  511. if (that.async) {
  512. let startIndex = that.imgArray.length;
  513. //直接上传
  514. that.asyncUpload(startIndex);
  515. } else {
  516. that.$emit("result", {
  517. code: 500,
  518. msg: '同步模式下,我不会被调用哦~'
  519. });
  520. }
  521. },
  522. checkPlatform() {
  523. const that = this;
  524. let canUse = true;
  525. //#ifdef H5
  526. that.tipObj.prompt = "该环境不支持图片压缩,图片压缩功能不会生效。";
  527. that.tipObj.must = true;
  528. that.tipObj.typeColor = that.tipObj.warning;
  529. canUse = false;
  530. that.hasAysnc();
  531. //#endif
  532. return canUse;
  533. }
  534. }
  535. }
  536. </script>
  537. <style scoped>
  538. .w-100 {
  539. width: 100%;
  540. }
  541. .flex {
  542. /* 转为弹性盒模型*/
  543. display: flex;
  544. }
  545. .flex_bet {
  546. /* 两端左右*/
  547. display: flex;
  548. justify-content: space-between;
  549. }
  550. .flex_wrap {
  551. /* 转为弹性盒模型并自动换行*/
  552. display: flex;
  553. flex-wrap: wrap;
  554. }
  555. .flex_xy_center {
  556. display: flex;
  557. justify-content: center;
  558. align-items: center;
  559. }
  560. .upload-img-view {
  561. height: 200rpx;
  562. width: 32%;
  563. border-radius: 10rpx;
  564. border: 4rpx dotted #F1F1F1;
  565. /* background-color: #F1F1F1; */
  566. }
  567. .upload-img-view>image {
  568. width: 70rpx;
  569. height: 70rpx;
  570. }
  571. .upload-txt {
  572. font-size: 24rpx;
  573. color: #FFFFFF;
  574. }
  575. .imgs-view {
  576. height: 200rpx;
  577. width: 31.5%;
  578. border-radius: 10rpx;
  579. margin-right: 1.8%;
  580. margin-bottom: 16rpx;
  581. border: 1rpx solid #F1F1F1;
  582. box-sizing: border-box;
  583. position: relative;
  584. }
  585. .result {
  586. position: absolute;
  587. bottom: 0;
  588. width: 100%;
  589. height: 45rpx;
  590. font-size: 26rpx;
  591. left: 0;
  592. background-color: rgba(0, 0, 0, .6);
  593. text-align: center;
  594. line-height: 45rpx;
  595. border-bottom-left-radius: 10rpx;
  596. border-bottom-right-radius: 10rpx;
  597. }
  598. .result>.success {
  599. color: #00b900;
  600. }
  601. .result>.error {
  602. color: #b52e25;
  603. }
  604. .uploading {
  605. position: absolute;
  606. background-color: rgba(0, 0, 0, .5);
  607. left: 0;
  608. top: 0;
  609. width: 100%;
  610. height: 100%;
  611. text-align: center;
  612. line-height: 100%;
  613. z-index: 999;
  614. }
  615. .uploading image {
  616. width: 60rpx;
  617. height: 60rpx;
  618. z-index: 1000;
  619. animation: rotation .6s linear infinite;
  620. -moz-animation: rotation .6s linear infinite;
  621. -webkit-animation: rotation .6s linear infinite;
  622. -o-animation: rotation .6s linear infinite;
  623. }
  624. @keyframes rotation {
  625. from {
  626. -webkit-transform: rotate(0deg);
  627. transform: rotate(0deg);
  628. -moz-transform: rotate(0deg);
  629. -o-transform: rotate(0deg);
  630. }
  631. to {
  632. -webkit-transform: rotate(360deg);
  633. transform: rotate(360deg);
  634. -moz-transform: rotate(360deg);
  635. -o-transform: rotate(360deg);
  636. }
  637. }
  638. .imgs-view>image {
  639. width: 100%;
  640. height: 100%;
  641. border-radius: 10rpx;
  642. }
  643. .imgupload__tip {
  644. font-size: 24rpx;
  645. color: #FF0000;
  646. margin: 10rpx auto;
  647. }
  648. .imgupload__tip>label {
  649. color: #009100;
  650. }
  651. .del-btn {
  652. position: absolute;
  653. top: 0;
  654. right: 0;
  655. width: 32rpx;
  656. height: 32rpx;
  657. z-index: 999;
  658. }
  659. .del-btn>image {
  660. width: 100%;
  661. height: 100%;
  662. display: flex;
  663. }
  664. .css2 {
  665. border-style: solid;
  666. border-width: 0px 0px 100px 100px;
  667. border-color: transparent transparent blue transparent;
  668. width: 0px;
  669. height: 0px;
  670. }
  671. </style>