预计目标

image.pngimage.pngimage.png

需要的功能

图片大小限制

  1. event.preventDefault()
  2. const file = event.target.files[0]
  3. const fileName = file.name
  4. const fileSize = file.size
  5. const fileExt = fileName.split('.').pop()
  6. const accept = '.jpg,.jpeg,.png'
  7. const maxSize = 15 * 1024 * 1024
  9. if (accept && accept.indexOf(fileExt) === -1) {
  10.   return Toast.show('文件类型不支持')
  11. }
  13. if (fileSize > maxSize) {
  14.   return Toast.show('文件体积超出上传限制')
  15. }

图片上传

  1. try {
  2.   Toast.loading()
  3.   const data = await courseUploader(newFile)
  4.   const fileUrl = `https://${data.Location}`
  5.   this.setState({ imageList: [fileUrl] }, Toast.hide)
  6. } catch (error) {
  7.   Toast.show('上传失败')
  8. } finally {
  9.   this.isLoading = false
  10. }

图片压缩

  1. // 图片压缩
  2. export const imageCompress = (file) => {
  3.   return new Promise((resolve, reject) => {
  4.     const reader = new FileReader()
  5.     const image = new Image()
  7.     reader.readAsDataURL(file)
  8.     reader.onload = function(e) {
  9.       image.src = e.target.result
  10.       image.onerror = () => {
  11.         return reject('图像加载失败')
  12.       }
  13.       image.onload = function() {
  14.         const canvas = document.createElement('canvas')
  15.         const context = canvas.getContext('2d')
  17.         const originWidth = this.width
  18.         const originHeight = this.height
  19.         const maxWidth = 1000
  20.         const maxHeight = 1000
  21.         let targetWidth = originWidth
  22.         let targetHeight = originHeight
  24.         if (originWidth > maxWidth || originHeight > maxHeight) {
  25.           if (originWidth / originHeight > maxWidth / maxHeight) {
  26.             targetWidth = maxWidth
  27.             targetHeight = Math.round(maxWidth * (originHeight / originWidth))
  28.           } else {
  29.             targetHeight = maxHeight
  30.             targetWidth = Math.round(maxHeight * (originWidth / originHeight))
  31.           }
  32.         }
  34.         canvas.width = targetWidth
  35.         canvas.height = targetHeight
  37.         context.clearRect(0, 0, targetWidth, targetHeight)
  38.         context.drawImage(image, 0, 0, targetWidth, targetHeight)
  39.         const dataUrl = canvas.toDataURL('image/jpeg', 0.92)
  41.         return resolve(dataURLtoFile(dataUrl))
  42.       }
  43.     }
  44.   })
  45. }

图片base64转file

  1. // 图片base64转file
  2. export const dataURLtoFile = (dataurl, filename = 'file') => {
  3.   let arr = dataurl.split(',')
  4.   let mime = arr[0].match(/:(.*?);/)[1]
  5.   let suffix = mime.split('/')[1]
  6.   let bstr = atob(arr[1])
  7.   let n = bstr.length
  8.   let u8arr = new Uint8Array(n)
  9.   while (n--) {
  10.     u8arr[n] = bstr.charCodeAt(n)
  11.   }
  12.   return new File([u8arr], `${filename}.${suffix}`, {
  13.     type: mime
  14.   })
  15. }

判断移动端图片是 竖图还是横图
Exif-js github文档

orientation值 旋转角度
1 0°
3 180°
6 顺时针90°
8 逆时针90° 
  1. import EXIF from 'exif-js'
  2. // 只在移动端生效
  3. EXIF.getData(file, function() {
  4.   const orient = EXIF.getTag(this, 'Orientation')
  5.   if (orient === 6) {
  6.     // 竖图
  7.     // 做向右旋转90度度处理
  8.   } else {
  9.     // 不做特殊处理
  10.   }
  11. })

canvas图片旋转

  1. const canvas = document.createElement('canvas')
  2. const context = canvas.getContext('2d')
  4. ...
  5. context.clearRect(0, 0, targetWidth, targetHeight) // 清空内容区
  6. ...
  8. canvas.width = targetHeight // targetHeight 当前图片高度 把canvas重绘
  9. canvas.height = targetWidth // targetWidth 当前图片宽度 把canvas重绘
  10. context.translate(targetHeight / 2, targetWidth / 2) // 设置当前图的中心区域
  11. context.rotate(90 * Math.PI / 180) // 向右旋转90度
  12. context.drawImage(image, -targetWidth / 2, -targetHeight / 2, targetWidth, targetHeight)

完整代码

index.js

  1. import { PureComponent, Fragment, createRef } from 'react'
  2. import DocumentTitle from 'react-document-title'
  3. import Textarea from 'react-textarea-autosize'
  4. import router from 'umi/router'
  5. import styled from 'styled-components'
  6. import classnames from 'classnames'
  7. import { courseUploader } from '@@/utils/cos'
  8. import { imageCompress } from '@@/utils/imageCrop'
  9. import Toast from '@@/components/Toast'
  10. import withStyled from '@@/styles/withStyled'
  11. import notrService from '@@/services/note'
  12. import wx from 'weixin-js-sdk'
  14. import iconCloseGray from '@@/assets/icons/icon-close-gray.png'
  15. import iconImg from '@@/assets/icons/icon-img.png'
  17. const NoteController = withStyled(styled.div`
  18.   position: fixed;
  19.   top: 0;
  20.   left: 0;
  21.   right: 0;
  22.   z-index: 100;
  23.   margin: 0 auto;
  24.   padding: 9px 24px;
  25.   display: flex;
  26.   max-width: 480PX;
  27.   align-items: center;
  28.   justify-content: flex-end;
  29.   width: 100%;
  30.   background-color: #F9FAFC;
  31. `)
  33. const NoteChooseImage = withStyled(styled.div`
  34.   margin: 0 24px 0 0;
  35.   width: 24px;
  36.   height: 24px;
  37.   background-size: 100%;
  38.   background-repeat: no-repeat;
  39.   background-image: url(${iconImg});
  40.   &.notouch {
  41.     filter: opacity(0.5);
  42.   }
  43. `)
  45. const InputForImage = withStyled(styled.input`
  46.   display: none;
  47. `)
  49. const NotePublish = withStyled(styled.div`
  50.   padding: 9px 20px;
  51.   font-size: 14px;
  52.   color: #222222;
  53.   background-color: ${(props) => props.theme.primaryColor};
  54.   border-radius: 16px;
  55. `)
  57. const ImageArea = withStyled(styled.div`
  58.   padding: 0 24px 24px;
  59.   display: flex;
  60.   flex-wrap: wrap;
  61.   width: 100%;
  62.   height: auto;
  63. `)
  65. const ImageDisplay = withStyled(styled.div`
  66.   position: relative;
  67.   margin: 0 0 10px;
  68.   width: 96px;
  69.   height: 96px;
  70.   background-position: center;
  71.   background-size: 100%;
  72.   background-repeat: no-repeat;
  73.   background-image: url(${(props) => props.image});
  74.   border-radius: 8px;
  75.   &:nth-of-type(3n-1) {
  76.     margin: 0 auto 10px;
  77.   }
  78. `)
  80. const ImageDelete = withStyled(styled.div`
  81.   position: absolute;
  82.   top: 4PX;
  83.   right: 4PX;
  84.   width: 16PX;
  85.   height: 16PX;
  86.   background-size: 100%;
  87.   background-repeat: no-repeat;
  88.   background-image: url(${iconCloseGray});
  89.   border-radius: 50%;
  90. `)
  92. const textareaStyle = {
  93.   marginTop: 60, paddingLeft: 24, paddingRight: 24, paddingBottom: 24, width: '100%', fontSize: 16, color: '#475669', lineHeight: 2, border: 0, resize: 'none'
  94. }
  96. class CreatePage extends PureComponent {
  97.   constructor(props) {
  98.     super(props)
  99.     const { match: { params: { uniqueId } } } = this.props
  100.     this.uniqueId = uniqueId
  101.     this.inputNode = createRef()
  102.     this.isLoading = false
  103.     this.state = {
  104.       text: '',
  105.       notouch: false,
  106.       imageList: []
  107.     }
  108.   }
  110.   action = {
  111.     handleImageClick: () => {
  112.       const { imageList } = this.state
  114.       if (imageList.length !== 0) {
  115.         return Toast.show('只能上传一张图片')
  116.       }
  117.       this.inputNode.current.click()
  118.     },
  119.     handleImageChange: async (event) => {
  120.       event.preventDefault()
  121.       if (this.isLoading) {
  122.         return false
  123.       }
  125.       const file = event.target.files[0]
  126.       const fileName = file.name
  127.       const fileSize = file.size
  128.       const fileExt = fileName.split('.').pop()
  129.       const accept = '.jpg,.jpeg,.png'
  130.       const maxSize = 15 * 1024 * 1024
  132.       if (accept && accept.indexOf(fileExt) === -1) {
  133.         return Toast.show('文件类型不支持')
  134.       }
  136.       if (fileSize > maxSize) {
  137.         return Toast.show('文件体积超出上传限制')
  138.       }
  140.       this.isLoading = true
  141.       const newFile = await imageCompress(file)
  142.       try {
  143.         Toast.loading()
  144.         const data = await courseUploader(newFile)
  145.         const fileUrl = `https://${data.Location}`
  146.         this.setState({ imageList: [fileUrl], notouch: true }, Toast.hide)
  147.       } catch (error) {
  148.         Toast.show('上传失败')
  149.       } finally {
  150.         this.isLoading = false
  151.       }
  152.     },
  153.     handleDelete: (index, event) => {
  154.       event.stopPropagation()
  155.       const imageList = [...this.state.imageList]
  156.       imageList.splice(index, 1)
  157.       this.setState({ imageList, notouch: false })
  158.     },
  159.     handleNoteChange: (e) => {
  160.       this.setState({ text: e.target.value })
  161.     },
  162.     handleFetch: async () => {
  163.       const len = this.state.text.length
  164.       if (len >= 10 && len <= 1000) {
  165.         try {
  166.           Toast.loading()
  167.           await notrService.writeNote(this.uniqueId, {
  168.             noteContent: this.state.text,
  169.             imageUrl: this.state.imageList
  170.           })
  171.           setTimeout(() => {
  172.             Toast.show('笔记发表成功')
  173.             const pathname = `/note/${this.uniqueId}`
  174.             router.replace({
  175.               pathname,
  176.               query: {
  177.                 tabKey: 'mine'
  178.               }
  179.             })
  180.           }, 500)
  181.         } catch (error) {
  182.           setTimeout(() => { Toast.show(error.message) }, 500)
  183.         }
  184.       } else {
  185.         Toast.show('笔记内容字数错误，字数在10-1000内')
  186.       }
  187.     },
  188.     previewImage: (event) => {
  189.       event.stopPropagation()
  190.       wx.previewImage({
  191.         current: this.state.imageList[0], // 当前显示图片的http链接
  192.         urls: this.state.imageList // 需要预览的图片http链接列表
  193.       })
  194.     }
  195.   }
  197.   render() {
  198.     const { text, imageList, notouch } = this.state
  199.     return (
  200.       <DocumentTitle title='写笔记'>
  201.         <Fragment>
  202.           <NoteController>
  203.             <InputForImage ref={this.inputNode} type='file' accept='image/*' onClick={(e) => { e.target.value = '' }} onChange={this.action.handleImageChange} />
  204.             <NoteChooseImage className={classnames({ notouch })} onClick={this.action.handleImageClick} />
  205.             <NotePublish onClick={this.action.handleFetch}>发表</NotePublish>
  206.           </NoteController>
  207.           <Textarea minRows={5} placeholder='记录学习后的珍贵收获~' value={text} onChange={this.action.handleNoteChange} style={textareaStyle} />
  208.           {imageList.length !== 0 && (
  209.             <ImageArea>
  210.               {imageList.map((item, index) => (
  211.                 <ImageDisplay image={item} key={index} onClick={this.action.previewImage}>
  212.                   <ImageDelete onClick={(event) => this.action.handleDelete(index, event)} />
  213.                 </ImageDisplay>
  214.               ))}
  215.             </ImageArea>
  216.           )}
  217.         </Fragment>
  218.       </DocumentTitle>
  219.     )
  220.   }
  221. }
  223. export default CreatePage

imageCrop.js

  1. import { getClientWidth } from '@@/utils/dom'
  2. import EXIF from 'exif-js'
  4. const clientWidth = getClientWidth()
  5. const maxImageWidth = clientWidth >= 480 ? 480 : clientWidth
  7. // 浏览器是否支持 webp 图片格式
  8. export const isWebpSupport = () => {
  9.   const dataUrl = document.createElement('canvas').toDataURL('image/webp')
  10.   return dataUrl.indexOf('data:image/webp') === 0
  11. }
  13. // 根据屏幕分辨率获取长度
  14. const getImageLength = (length) => {
  15.   const imageLength = Math.floor(Number(length) || 0) || maxImageWidth
  16.   return window.devicePixelRatio * imageLength
  17. }
  19. // 腾讯数据万象图片链接拼接
  20. // 参考文档 https://cloud.tencent.com/document/product/460/6929
  21. export const fasterImageUrl = (imageUrl, options) => {
  22.   if (!imageUrl || !String(imageUrl).startsWith('http')) {
  23.     return imageUrl
  24.   }
  26.   const { width } = Object.assign({}, options)
  27.   const imageWidth = getImageLength(width)
  29.   const formatSuffix = isWebpSupport() ? '/format/webp' : ''
  30.   const widthSuffix = `/w/${imageWidth}`
  32.   return `${imageUrl}?imageView2/2${formatSuffix}${widthSuffix}`
  33. }
  35. // 获取分享链接小图标
  36. export const getShareImageUrl = (imageUrl) => {
  37.   if (!imageUrl || !String(imageUrl).startsWith('http')) {
  38.     return imageUrl
  39.   }
  41.   return `${imageUrl}?imageView2/2/w/200`
  42. }
  44. // 图片base64转file
  45. export const dataURLtoFile = (dataurl, filename = 'file') => {
  46.   let arr = dataurl.split(',')
  47.   let mime = arr[0].match(/:(.*?);/)[1]
  48.   let suffix = mime.split('/')[1]
  49.   let bstr = atob(arr[1])
  50.   let n = bstr.length
  51.   let u8arr = new Uint8Array(n)
  52.   while (n--) {
  53.     u8arr[n] = bstr.charCodeAt(n)
  54.   }
  55.   return new File([u8arr], `${filename}.${suffix}`, {
  56.     type: mime
  57.   })
  58. }
  60. // 图片压缩 并 判断是否需要旋转
  61. export const imageCompress = (file) => {
  62.   return new Promise((resolve, reject) => {
  63.     const reader = new FileReader()
  64.     const image = new Image()
  66.     reader.readAsDataURL(file)
  67.     reader.onload = function(e) {
  68.       image.src = e.target.result
  69.       image.onerror = () => {
  70.         return reject('图像加载失败')
  71.       }
  72.       image.onload = function() {
  73.         const canvas = document.createElement('canvas')
  74.         const context = canvas.getContext('2d')
  76.         const originWidth = this.width
  77.         const originHeight = this.height
  78.         const maxWidth = 1000
  79.         const maxHeight = 1000
  80.         let targetWidth = originWidth
  81.         let targetHeight = originHeight
  83.         if (originWidth > maxWidth || originHeight > maxHeight) {
  84.           if (originWidth / originHeight > maxWidth / maxHeight) {
  85.             targetWidth = maxWidth
  86.             targetHeight = Math.round(maxWidth * (originHeight / originWidth))
  87.           } else {
  88.             targetHeight = maxHeight
  89.             targetWidth = Math.round(maxHeight * (originWidth / originHeight))
  90.           }
  91.         }
  93.         context.clearRect(0, 0, targetWidth, targetHeight)
  94.         // 图片翻转问题解决方案
  95.         // 在移动端，手机拍照后图片会左转90度，下面的函数恢复旋转问题
  96.         // orient = 6时候，是图片竖着拍的
  97.         EXIF.getData(file, function() {
  98.           const orient = EXIF.getTag(this, 'Orientation')
  99.           if (orient === 6) {
  100.             canvas.width = targetHeight
  101.             canvas.height = targetWidth
  102.             context.translate(targetHeight / 2, targetWidth / 2)
  103.             context.rotate(90 * Math.PI / 180)
  104.             context.drawImage(image, -targetWidth / 2, -targetHeight / 2, targetWidth, targetHeight)
  105.           } else {
  106.             canvas.width = targetWidth
  107.             canvas.height = targetHeight
  108.             context.drawImage(image, 0, 0, targetWidth, targetHeight)
  109.           }
  110.           const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
  111.           return resolve(dataURLtoFile(dataUrl))
  112.         })
  113.       }
  114.     }
  115.   })
  116. }

腾讯云存储照片 cos.js+utils.js
cos.js

import COS from 'cos-js-sdk-v5'
import UUID from 'uuid/v4'
import utilsService from '@@/services/utils'

// 创建认证实例
const courseInstance = new COS({
  getAuthorization: async (options, callback) => {
    const uploadKey = await utilsService.getUploadKey(options)
    callback(uploadKey)
  }
})

// 获取分片上传实例
const getUploader = (instance, region, bucket) => {
  return (file) => {
    const fileName = file.name
    const fileExt = fileName.split('.').pop()
    const fileHash = UUID()
    const fileKey = fileName === fileExt ? `client/${fileHash}` : `client/${fileHash}.${fileExt}`

    return new Promise((resolve, reject) => {
      instance.sliceUploadFile({
        Region: region,
        Bucket: bucket,
        Key: fileKey,
        Body: file
      }, (error, data) => {
        if (error) {
          return reject(error)
        }
        return resolve(data)
      })
    })
  }
}

export const courseUploader = getUploader(courseInstance, 'ap-beijing', 'course-1252068037')

utils.js

import { courseRequest as Axios } from '@@/utils/axios'

class UtilsService {
  async getUploadKey() {
    const { data: { credentials, expiredTime } } = await Axios.get('/util/get-temporary-key', {
      params: {
        durationSeconds: 60 * 60
      }
    })

    const { tmpSecretId, tmpSecretKey, sessionToken } = credentials
    return {
      TmpSecretId: tmpSecretId,
      TmpSecretKey: tmpSecretKey,
      XCosSecurityToken: sessionToken,
      ExpiredTime: expiredTime
    }
  }
}

export default new UtilsService()

莫名的坑

  1. 在安卓上无法上传图片的问题，不能触发onChange，解决办法 修改accept为： accept=’image/*’

详细解释：如果在input上面添加了accept字段，并且设置了一些值（png,jpeg,jpg），会发现，有的安卓是触发不了onChange，因为在accept的时候发生了拦截，使input的值未发生改变，所以建议使用accept=’image/*’，在onChange里面写格式判断。

  1. 自动打开相机，而没有让用户选择相机或相册，解决办法 去掉 capture**=”camera”**
  2. 手机拍照，或者手机里面度竖图，发生左转90度的变化，就需要单独判断是不是竖图，然后向右旋转