feat: 上传图片组件场景添加、轮播图样式修复

src/components/UploadCover/index.tsx

@@ -25,6 +25,7 @@ export interface UploadCoverProps {
   source?: source
   maxCount?: number
   align?: 'center' | 'left'
+  tag?: 'cover' | 'screenshot'
 }
 
 // const values = [
@@ -34,7 +35,6 @@ export interface UploadCoverProps {
 // ]
 
 const mergeCoverImages = (value: CoverImageValue[], images: CoverImageValue[]) => {
-  console.log(value, images, 11111)
   // 根据id来更新url, 如果id不存在，则添加到value中
   const newImages = images
   const updatedValue = value.map(item => {
@@ -55,6 +55,7 @@ export default function UploadCover(props: UploadCoverProps) {
     source = ['album', 'history', 'preset'] as source,
     maxCount = 9,
     align = 'center',
+    tag = 'cover',
   } = props
 
   const [visible, setVisible] = useState(false)
@@ -111,7 +112,7 @@ export default function UploadCover(props: UploadCoverProps) {
           }
         </View>
       </CommonPopup>
-      <UploadSourcePopup ref={uploadSourcePopupRef} onAdd={onAdd} />
+      <UploadSourcePopup tag={tag} ref={uploadSourcePopupRef} onAdd={onAdd} />
       <div className={`upload-cover-root ${value.length === 0 && align === 'center' ? 'upload-cover-act-center' : ''}`}>
         {value.length < maxCount && (
           <div className="upload-cover-act" onClick={() => setVisible(true)}>

src/components/UploadCover/upload-from-wx.tsx

@@ -4,17 +4,14 @@ import Taro from '@tarojs/taro'
 import uploadApi from '@/services/uploadFiles'
 import './upload-from-wx.scss'
 import { CoverImageValue } from '.'
-import { uploadFileResponseData } from '@/services/uploadFiles'
 
 export interface UploadFromWxProps {
-  onAdd: (images: CoverImageValue[], onFileUploaded: Promise<{ id: string, data: uploadFileResponseData }[]>) => void
+  onAdd: (images: CoverImageValue[], onFileUploaded: Promise<{ id: string, url: string }[]>) => void
   maxCount: number
 }
 
 async function convert_to_jpg_and_compress (src: string, { width, height }): Promise<string> {
-  console.log(width, height, '13123132')
   const canvas = Taro.createOffscreenCanvas({ type: '2d', width, height })
-  console.log(canvas, canvas.width, canvas.height, 'canvas')
   const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
 
   const image = canvas.createImage()
@@ -23,14 +20,13 @@ async function convert_to_jpg_and_compress (src: string, { width, height }): Pro
     image.src = src
   })
   ctx.clearRect(0, 0, width, height)
-  ctx.drawImage(image, 0, 0, width, height)
+  ctx.drawImage(image as unknown as CanvasImageSource, 0, 0, width, height)
 
-  const imageData = ctx.getImageData(0, 0, width, height)
-  console.log(imageData, 'imageData')
+  // const imageData = ctx.getImageData(0, 0, width, height)
 
   return new Promise((resolve, reject) => {
     Taro.canvasToTempFilePath({
-      canvas,
+      canvas: canvas as unknown as Taro.Canvas,
       fileType: 'jpg',
       quality: 0.7,
       success: res => resolve(res.tempFilePath),
@@ -43,7 +39,6 @@ async function convert_to_jpg_and_compress (src: string, { width, height }): Pro
 async function compressImage(files) {
   const res: string[] = []
   for (const file of files) {
-    console.log(file, file.width, file.height, 'file frfdfsfds')
     const compressed_image = await convert_to_jpg_and_compress(file.path, { width: file.width, height: file.height })
     res.push(compressed_image)
   }
@@ -59,15 +54,14 @@ const IMAGE_MAX_SIZE = {
 // 标准长宽比，判断标准
 const STANDARD_ASPECT_RATIO = IMAGE_MAX_SIZE.width / IMAGE_MAX_SIZE.height
 
+type ChoosenImageRes = { path: string, size: number, width: number, height: number }
 // 根据图片标准重新设置图片尺寸
 async function onChooseImageSuccess(tempFiles) {
-  console.log(tempFiles, 'tempFiles')
-  const result: { path: string, size: number, widht: number, height: number }[] = []
+  const result: ChoosenImageRes[] = []
   for (const tempFile of tempFiles) {
-    console.count('tempFile')
     const { width, height } = await Taro.getImageInfo({ src: tempFile.path })
     const image_aspect_ratio = width / height
-    let fileRes: { path: string, size: number } = { path: tempFile.path, size: tempFile.size }
+    let fileRes: ChoosenImageRes = { path: tempFile.path, size: tempFile.size, width: 0, height: 0 }
     // 如果图片长宽比小于标准长宽比，则依照图片高度以及图片最大高度来重新设置图片尺寸
     if (image_aspect_ratio < STANDARD_ASPECT_RATIO) {
       fileRes = {

src/components/UploadCover/upload-source-popup.tsx

@@ -18,6 +18,7 @@ type ImageItem = {
 
 interface UploadImageProps {
   onAdd: (images: ImageItem[]) => void
+  tag: 'cover' | 'screenshot'
 }
 
 export const sourceMap = new Map<SourceType, string>([
@@ -32,6 +33,7 @@ const checkImageSelected = (images: ImageItem[], image: ImageItem) => {
 export default forwardRef(function UploadImage(props: UploadImageProps, ref) {
   const {
     onAdd = () => void 0,
+    tag = 'cover',
   } = props
   const [visible, setVisible] = useState(false)
   const [sourceType, setSourceType] = useState<SourceType>('history')
@@ -62,7 +64,7 @@ export default forwardRef(function UploadImage(props: UploadImageProps, ref) {
   }))
 
   function fetchImages(st: SourceType) {
-    publishService.getPictures({ type: st }).then(res => {
+    publishService.getPictures({ type: st, tag }).then(res => {
       if (res.code === 0) {
         let start = 0
         setImages(res.data.rows.map(item => ({