?import?compress?from?'@/utils/compress'
import?imgSize?from?'@/utils/imgSize
????async?handleUpload(data)?{
??????const?file?=?data.file
???//?原來的
??????const?form?=?new?FormData()
??????form.append('file',?file)
??????File.upload(form)
????????.then(response?=>?{
??????????console.log(response)
??????????this.file?=?response.data
????????})
????????.catch(error?=>?{
??????????console.error(error)
????????})
????},
??????//?demo如果圖片不轉(zhuǎn)base64
??????//?imgSize(file).then(()?=>?{
??????//???compress(file,?100).then((res)?=>?{
??????//?????const?form?=?new?FormData()
??????//?????form.set('file',?res)
??????//?????File.upload(form)
??????//???????.then(response?=>?{
??????//?????????console.log(response)
??????//?????????this.file?=?response.data
??????//???????})
??????//???????.catch(error?=>?{
??????//?????????console.error(error)
??????//???????})
??????//???})
??????//?}).catch(()?=>?{})
??????//?demo如果圖片轉(zhuǎn)base64
??????//?imgSize(file).then(()?=>?{
??????//???compress(file,?100).then((res)?=>?{
??????//?????const?reader?=?new?FileReader()
??????//?????reader.readAsDataURL(res)
??????//?????reader.onload?=?(e)?=>?{
??????//???????console.log(e)
??????//???????//?讀取到的圖片base64?數(shù)據(jù)編碼?在此編碼字符串傳給后臺即可
??????//???????let?param?=?{
??????//?????????base64:e.target.result
??????//???????}
??????//???????//?以下上傳
??????//???????接口.(param)
??????//?????}
??????//?????console.log(ocrImgStr)
??????//?????const?form?=?new?FormData()
??????//?????form.set('file',?res)
??????//?????File.upload(form)
??????//???????.then(response?=>?{
??????//?????????console.log(response)
??????//?????????this.file?=?response.data
??????//???????})
??????//???????.catch(error?=>?{
??????//?????????console.error(error)
??????//???????})
??????//???})
??????//?}).catch(()?=>?{})
compress.js
import * as imageConversion from 'image-conversion'
export default async function (file,size){
? let blob = null
? await imageConversion.compressAccurately(file, size).then(res => {
? ? blob = res
? })
? const resAvatarFile = new window.File(
? ? [blob],
? ? file.name,
? ? { type: file.type }
? )
? return resAvatarFile
}
imgSize.js
import { Message } from 'element-ui'
export default function (file) {
? return new Promise((resolve, reject) => {
? ? const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
? ? const isLt2M = file.size / 1024 / 1024 < 2
? ? if (!isJpgOrPng) {
? ? ? reject(
? ? ? ? Message({
? ? ? ? ? message: '上傳圖片只能是 JPG 或 PNG 格式',
? ? ? ? ? type: 'error'
? ? ? ? })
? ? ? )
? ? }
? ? if (!isLt2M) {
? ? ? reject(
? ? ? ? Message({
? ? ? ? ? message: '上傳頭像圖片大小不能超過 2MB!',
? ? ? ? ? type: 'error'
? ? ? ? })
? ? ? )
? ? }
? ? resolve()
? })
}
