|
|
@@ -5,6 +5,12 @@
|
|
|
:multiple="multiple" :maxCount="maxCount"
|
|
|
@afterRead="afterRead" @delete="onDelete">
|
|
|
<slot name="content" :data="fileList"></slot>
|
|
|
+ <image
|
|
|
+ v-if="customImg"
|
|
|
+ src="@/static/discover/ic_upload.png"
|
|
|
+ mode="widthFix"
|
|
|
+ :style="{width: width + 'px', height: height + 'px'}"
|
|
|
+ ></image>
|
|
|
</u-upload>
|
|
|
</template>
|
|
|
|
|
|
@@ -23,7 +29,7 @@ export default {
|
|
|
},
|
|
|
accept: {
|
|
|
type: String,
|
|
|
- default: uni.$u.props.upload.accept
|
|
|
+ default: 'image' // 默认接受图片
|
|
|
},
|
|
|
width: {
|
|
|
type: [String, Number],
|
|
|
@@ -45,7 +51,31 @@ export default {
|
|
|
multiple: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 图片格式限制
|
|
|
+ imageFormats: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ['png', 'jpg', 'jpeg']
|
|
|
+ },
|
|
|
+ // 视频格式限制
|
|
|
+ videoFormats: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ['mp4', 'mov', 'mkv', 'wmv']
|
|
|
+ },
|
|
|
+ // 图片大小限制，单位为byte
|
|
|
+ maxImageSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 2 * 1024 * 1024 // 默认2MB
|
|
|
+ },
|
|
|
+ // 视频大小限制，单位为byte
|
|
|
+ maxVideoSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 50 * 1024 * 1024 // 默认50MB
|
|
|
+ },
|
|
|
+ customImg: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -67,6 +97,50 @@ export default {
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
let lists = [].concat(event.file);
|
|
|
let fileListLen = this[`fileList`].length;
|
|
|
+
|
|
|
+ // 验证文件格式和大小
|
|
|
+ for (let i = 0; i < lists.length; i++) {
|
|
|
+ const file = lists[i];
|
|
|
+ const fileName = file.name.split('/').pop();
|
|
|
+ const fileExtension = fileName.split('.').pop().toLowerCase();
|
|
|
+
|
|
|
+ // 根据文件扩展名判断是图片还是视频（优先使用扩展名判断）
|
|
|
+ const isImage = this.imageFormats.includes(fileExtension);
|
|
|
+ const isVideo = this.videoFormats.includes(fileExtension);
|
|
|
+
|
|
|
+ if (isImage) {
|
|
|
+ // 图片验证
|
|
|
+ if (file.size && file.size > this.maxImageSize) {
|
|
|
+ const maxSizeMB = (this.maxImageSize / 1024 / 1024).toFixed(1);
|
|
|
+ uni.$u.toast(`图片大小不能超过 ${maxSizeMB}MB`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else if (isVideo) {
|
|
|
+ // 视频验证
|
|
|
+ if (file.size && file.size > this.maxVideoSize) {
|
|
|
+ const maxSizeMB = (this.maxVideoSize / 1024 / 1024).toFixed(1);
|
|
|
+ uni.$u.toast(`视频大小不能超过 ${maxSizeMB}MB`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 既不是图片也不是视频，检查是否有file.type
|
|
|
+ if (file.type) {
|
|
|
+ if (file.type.startsWith('image/')) {
|
|
|
+ // 是图片但扩展名不在允许列表中
|
|
|
+ uni.$u.toast(`图片格式仅限 ${this.imageFormats.join(', ')}`);
|
|
|
+ return;
|
|
|
+ } else if (file.type.startsWith('video/')) {
|
|
|
+ // 是视频但扩展名不在允许列表中
|
|
|
+ uni.$u.toast(`视频格式仅限 ${this.videoFormats.join(', ')}`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 无法判断类型或类型不支持
|
|
|
+ uni.$u.toast('不支持的文件格式');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
lists.map((item) => {
|
|
|
this[`fileList`].push({
|
|
|
...item,
|
