js上传图片前改变图片的格式为png

// 将图片转换为 PNG 格式 const convertImageToPng = (file: File): Promise<File> => { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = (e) => { const img = new window.Image() img.onload = () => { // 创建 canvas const canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height // 绘制图片到 canvas const ctx = canvas.getContext('2d') if (!ctx) { reject(new Error('无法获取 canvas context')) return } ctx.drawImage(img, 0, 0) // 转换为 PNG blob canvas.toBlob( (blob) => { if (!blob) { reject(new Error('图片转换失败')) return } // 创建新的 File 对象 const pngFile = new File( [blob], file.name.replace(/\.[^.]+$/, '.png'), { type: 'image/png', } ) resolve(pngFile) }, 'image/png', 1.0 ) } img.onerror = () => reject(new Error('图片加载失败')) img.src = e.target?.result as string } reader.onerror = () => reject(new Error('文件读取失败')) reader.readAsDataURL(file) }) } // 上传图片到七牛云 const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => { const files = e.target.files if (!files || files.length === 0 || !qiniuToken) return const file = files[0] try { // 将图片转换为 PNG 格式 const pngFile = await convertImageToPng(file) const formData = new FormData() const key = `ai/mjBaseImg/${Date.now()}_${pngFile.name}` formData.append('file', pngFile) formData.append('token', qiniuToken) formData.append('key', key) const response = await fetch('https://upload-z1.qiniup.com', { method: 'POST', body: formData, }) const result = await response.json() if (result.code === 200) { const imageUrl = `https://static.xutongbao.top/${result.data.key}` setUploadedImages((prev) => [...prev, imageUrl]) } } catch (error) { console.error('上传失败:', error) } // 清空 input,允许重复选择同一文件 e.target.value = '' }