likeadmin项目uniapp端u-upload支持图片和视频上传

一、优化vk-uview-ui的upload组件

1、修改limitType，支持视频扩展

limitType: {
			type: Array,
			default() {
				// 支付宝小程序真机选择图片的后缀为"image"
				// https://opendocs.alipay.com/mini/api/media-image
				return ["png", "jpg", "jpeg", "webp", "gif", "image", "mp4", "mov", "avi"];
			}
		},

2、修改image标签，增加对选择视频时的预览图片支持

修改methods中的selectFile方法

修改checkFileExt方法

使用 uni.chooseMedia API 来选择包含图片和视频的文件

<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage" :src="item.file.thumbTempFilePath || item.url || item.path" :mode="imageMode"></image>

selectFile() {
			let that = this;
			if (that.disabled) return;
			const { name = "", maxCount, multiple, maxSize, sizeType, camera, compressed, maxDuration, sourceType } = that;
			let chooseFile = null;
			let lists = JSON.parse(JSON.stringify(that.lists));
			const newMaxCount = maxCount - lists.length;
			// 设置为只选择图片的时候使用 chooseImage 来实现
			chooseFile = new Promise((resolve, reject) => {
				uni.chooseMedia({
					count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
					sourceType: sourceType,
					sizeType,
					maxDuration: maxDuration,
					success: resolve,
					fail: reject
				});
			});
			chooseFile
				.then(res => {
					let file = null;
					let listOldLength = that.lists.length;
					res.tempFiles.map((val, index) => {
						// 检查文件后缀是否允许，如果不在that.limitType内，就会返回false
						if (!that.checkFileExt(val)) return;

						// 如果是非多选，index大于等于1或者超出最大限制数量时，不处理
						if (!multiple && index >= 1) return;
						if (val.size > maxSize) {
							that.$emit("on-oversize", val, that.lists, that.index);
							that.showToast("超出允许的文件大小");
						} else {
							if (maxCount <= lists.length) {
								that.$emit("on-exceed", val, that.lists, that.index);
								that.showToast("超出最大允许的文件个数");
								return;
							}
							lists.push({
								url: val.tempFilePath,
								progress: 0,
								error: false,
								file: val
							});
						}
					});

					// 这样实现深拷贝会导致在H5中file为空对象
					// that.lists = JSON.parse(JSON.stringify(lists));
					this.deepClone(lists, that.lists);
					// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
					that.$emit("on-choose-complete", that.lists, that.index);
					if (that.autoUpload) that.uploadFile(listOldLength);
				})
				.catch(error => {
					that.$emit("on-choose-fail", error);
				});
		},



checkFileExt(file) {
			return true
			检查是否在允许的后缀中
			let noArrowExt = false;
			// 获取后缀名
			let fileExt = "";
			const reg = /.+\./;
			// 如果是H5，需要从name中判断
			// #ifdef H5
			// fileExt = file.name.replace(reg, "").toLowerCase();
			// #endif
			// 非H5，需要从path中读取后缀
			// #ifndef H5
			fileExt = file.tempFilePath.replace(reg, "").toLowerCase();
			// #endif
			// 使用数组的some方法，只要符合limitType中的一个，就返回true
			noArrowExt = this.limitType.some(ext => {
				// 转为小写
				return ext.toLowerCase() === fileExt;
			});
			if (!noArrowExt) this.showToast(`不允许选择${fileExt}格式的文件`);
			return noArrowExt;
		},

3、在uniapp端增加发布文章功能

 服务端配置

1、server/like/front/routers/article.py

增加方法：

@router.post('/add')
@unified_resp
async def article_add(add_in: ArticleAddIn, article_service: IArticleService = Depends(ArticleService.instance)):
    """
    添加文章
    :return:
    """
    return await article_service.add(add_in)

2、server/like/front/schemas/article.py

新增类

class ArticleAddIn(BaseModel):
    """
    新增文章
    """
    title: str
    cid: int
    intro: str
    image: str
    summary: str
    author: str
    content: str
    sort: str
    is_show: int = Field(alias='isShow', ge=0, le=1)  # 是否显示: [0=否, 1=是]

3、server/like/front/service/article.py

IArticleService类中新增方法

@abstractmethod
    async def add(self, add_in: ArticleAddIn):
        """
        文章新增
        :return:
        """
        pass

ArticleService类中新增方法

    async def add(self, add_in: ArticleAddIn):
        """
        添加文章
        :param add_in:
        :return:
        """
        add_article_dict = add_in.dict()
        add_article_dict['create_time'] = int(time.time())
        add_article_dict['update_time'] = int(time.time())
        query = article_table.insert().values(**add_article_dict)
        return await db.execute(query)

uniapp端配置

1、uniapp/src/api/news.ts

增加方法

export function articleAdd(data: any) {
    return request.post({ url: '/article/add', data:data }, { isAuth: true })
}

2、页面功能实现

<template>
	<view class="warp">
		<u-form class="u-form" :model="formData" ref="form1" style="width: 100%">
			<u-form-item class="label" label="专栏" prop="cid" style="width: 100%">
				<u-input v-model="cateName" style="width: 100%" maxlength="20" />
			</u-form-item>
			<u-form-item class="label" label="标题" prop="title" style="width: 100%;">
				<u-input class="title" v-model="formData.title" style="width: 100%" maxlength="50"/>
			</u-form-item>
      <u-form-item ref="editorRef" class="label" label="内容" style="width: 100%;">
				<editor
						class="editorDom"
						@input="handleEditorInput"
						@ready="onEditorReady"
						placeholder="请输入内容"
						font-size:16px
						line-height:2
				></editor>
      </u-form-item>
			<u-form-item class="label" label="照片" style="width: 100%;">
					<u-upload
							ref="uploadRef"
							:auto-upload="false"
							upload-text="选择照片"
					>
					</u-upload>
			</u-form-item>
		</u-form>
		<button class="publish-btn" @click="submit" :disabled="disabled">保存</button>
	</view>
</template>

3、关于富文本内容溢出问题

富文本组件样式增加

word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;