企业官网建设流程全解析

新建 uploadImage.vue 文件

<template> <uni-file-picker ref="files" v-model="fileLists" :title="title" :limit="limit" :auto-upload="false" @select="selectFile" @delete="deleteFile"> <view class="add line-d-E5 radius-16 f-24 t-gray80 bg-ed flex a-center j-center"> <image class="img" :src="baseImgUrl + '/recycle/20260514-upload-img-icon.png'" /> </view> </uni-file-picker> </template> <script> import { upload } from '@/api/system/upload'; import util, { getExtname } from '@/utils'; export default { props: { value: [String, Array], limit: { type: [String, Number], default: 5, }, fileSize: { type: Number, default: 1, }, title: { type: String, default: '', }, pathSuffix: { type: String, default: '', } }, data() { return { fileLists: [ // { // url: 'https://xxx.xxx.xxx.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg', // name: 'shuijiao.png', // extname: 'png' // } ] } }, mounted() { if (this.value) { let imgs = this.value; if (typeof this.value === "string") { imgs = this.value.split(','); } this.fileLists = imgs.map(item => { return { url: item, name: item, extname: getExtname(item) }; }); } }, methods: { selectFile(e) { let index; for (index in e.tempFiles) { this.fileLists.push(e.tempFiles[index]); // 先不限制图片上传大小 if (e.tempFiles[index].size / 1024 / 1024 > this.fileSize) { this.$nextTick(() => { this.fileLists.splice(this.fileLists.length - 1, 1); }); util.toast(`上传头像图片大小不能超过 ${this.fileSize} MB!`) break; } this.uploadImg(e.tempFilePaths[index], this.fileLists.length - 1); } }, uploadImg(path, index) { upload({ filePath: path, name: 'file', custom: { loading: true }, // #ifdef MP-ALIPAY fileType: 'image/video/audio', // #endif }, this.pathSuffix ).then(res => { this.fileLists.splice( index, 1, { url: res.data.url, name: res.data.fileName, extname: getExtname(res.data.fileName) } ); this.setValue(); }).catch(err => { this.deleteFile({ tempFilePath: path }) }); }, deleteFile(e) { this.fileLists.forEach((item, index) => { if (e.tempFilePath == item.url) { this.fileLists.splice(index, 1); this.setValue(); return; } }) }, setValue() { let imgs = this.fileLists.map(item => item.url); if (typeof this.value === "string" || !this.value) { return this.$emit('input', imgs.join(',')); } this.$emit('input', imgs); } } } </script> <style lang="scss"> .add { width: 160rpx; height: 160rpx; .img { width: 64rpx; height: 64rpx; } } </style>

调用

<com-uploadImage-index limit="3" v-model="form.urls" pathSuffix="/work_order" class="upload-box flex-1 m-b-25"/> // 自定义 上传图标 .upload-box{ ::v-deep .icon-del-box { width: 40rpx; height: 40rpx; } }