使用Vue實(shí)現(xiàn)圖片上傳的三種方式

<template>
 <el-upload
  list-type="picture-card"
  action="''"
  :http-request="upload"
  :before-upload="beforeAvatarUpload">
  <i class="el-icon-plus"></i>
 </el-upload>
</template>

<script>
 import {getAliOSSCreds} from '@/api/common' // 向后端獲取 OSS秘鑰信息
 import {createId} from '@/utils' // 一個(gè)生產(chǎn)唯一的id的方法
 import OSS from 'ali-oss'

 export default {
  name: 'imgUpload',
  data () {
   return {}
  },
  methods: {
   // 圖片上傳前驗(yàn)證
   beforeAvatarUpload (file) {
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
     this.$message.error('上傳頭像圖片大小不能超過(guò) 2MB!')
    }
    return isLt2M
   },
   // 上傳圖片到OSS 同時(shí)派發(fā)一個(gè)事件給父組件監(jiān)聽(tīng)
   upload (item) {
    getAliOSSCreds().then(res => { // 向后臺(tái)發(fā)請(qǐng)求 拉取OSS相關(guān)配置
     let creds = res.body.data
     let client = new OSS.Wrapper({
      region: 'oss-cn-beijing', // 服務(wù)器集群地區(qū)
      accessKeyId: creds.accessKeyId, // OSS帳號(hào)
      accessKeySecret: creds.accessKeySecret, // OSS 密碼
      stsToken: creds.securityToken, // 簽名token
      bucket: 'imgXXXX' // 阿里云上存儲(chǔ)的 Bucket
     })
     let key = 'resource/' + localStorage.userId + '/images/' + createId() + '.jpg' // 存儲(chǔ)路徑，并且給圖片改成唯一名字
     return client.put(key, item.file) // OSS上傳
    }).then(res => {
     console.log(res.url)
     this.$emit('on-success', res.url) // 返回圖片的存儲(chǔ)路徑
    }).catch(err => {
     console.log(err)
    })
   }
  }
 }
</script>

<template>
 <el-upload
  ref="imgUpload"
  :on-success="imgSuccess"
  :on-remove="imgRemove"
  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
  :headers="headerMsg"
  :action="upLoadUrl"
  multiple>
  <el-button type="primary">上傳圖片</el-button>
 </el-upload>
</template>

<script>
 import {getAliOSSCreds} from '@/api/common' // 向后端獲取 OSS秘鑰信息
 import {createId} from '@/utils' // 一個(gè)生產(chǎn)唯一的id的方法
 import OSS from 'ali-oss'

 export default {
  name: 'imgUpload',
  data () {
   return {
     headerMsg:{Token:'XXXXXX'},
     upLoadUrl:'xxxxxxxxxx'
   }
  },
  methods: {
   // 上傳圖片成功
   imgSuccess (res, file, fileList) {
    console.log(res)
    console.log(file)
    console.log(fileList)  // 這里可以獲得上傳成功的相關(guān)信息
   }
  }
 }
</script>

export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function () { // 圖片轉(zhuǎn)base64完成后返回reader對(duì)象
   resolve(reader)
  }
  reader.onerror = reject
 })
}

<template>
 <div>
   <el-upload
    ref="imgBroadcastUpload"
    :auto-upload="false" multiple
    :file-list="diaLogForm.imgBroadcastList"
    list-type="picture-card"
    :on-change="imgBroadcastChange"
    :on-remove="imgBroadcastRemove"
    accept="image/jpg,image/png,image/jpeg"
    action="">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)2M</div>
   </el-upload>
   <el-button>submitData</el-button> 
 </div>
</template>

<script>
 import { uploadImgToBase64 } from '@/utils' // 導(dǎo)入本地圖片轉(zhuǎn)base64的方法

 export default {
  name: 'imgUpload',
  data () {
   return {
    diaLogForm: {
      goodsName:'', // 商品名稱(chēng)字段
      imgBroadcastList:[], // 儲(chǔ)存選中的圖片列表
      imgsStr:''   // 后端需要的多張圖base64字符串 , 分割
    }
   }
  },
  methods: {
   // 圖片選擇后 保存在 diaLogForm.imgBroadcastList 對(duì)象中
   imgBroadcastChange (file, fileList) {
    const isLt2M = file.size / 1024 / 1024 < 2 // 上傳頭像圖片大小不能超過(guò) 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('圖片選擇失敗，每張圖片大小不能超過(guò) 2MB,請(qǐng)重新選擇!')
    } else {
     this.diaLogForm.imgBroadcastList.push(file)
    }
   },
   // 有圖片移除后 觸發(fā)
   imgBroadcastRemove (file, fileList) {
    this.diaLogForm.imgBroadcastList = fileList
   },
   // 提交彈窗數(shù)據(jù)
   async submitDialogData () {
    const imgBroadcastListBase64 = []
    console.log('圖片轉(zhuǎn)base64開(kāi)始...')
    // 并發(fā) 轉(zhuǎn)碼輪播圖片list => base64
    const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
     const response = await uploadImgToBase64(file.raw)
     return response.result.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64,
    })
    // 按次序輸出 base64圖片
    for (const textPromise of filePromises) {
     imgBroadcastListBase64.push(await textPromise)
    }
    console.log('圖片轉(zhuǎn)base64結(jié)束..., ', imgBroadcastListBase64)
    this.diaLogForm.imgsStr = imgBroadcastListBase64.join()
    console.log(this.diaLogForm)
    const res = await addCommodity(this.diaLogForm)       // 發(fā)請(qǐng)求提交表單
    if (res.status) {
     this.$message.success('添加商品成功')
     // 一般提交成功后后端會(huì)處理，在需要展示商品地方會(huì)返回一個(gè)圖片路徑 
    }
   },
  }
 }
</script>

export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
  function getBase64Image (img) {
   const canvas = document.createElement('canvas')
   canvas.width = img.width
   canvas.height = img.height
   const ctx = canvas.getContext('2d')
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
   var dataURL = canvas.toDataURL()
   return dataURL
  }

  const image = new Image()
  image.crossOrigin = '*' // 允許跨域圖片
  image.src = img + '?v=' + Math.random() // 清除圖片緩存
  console.log(img)
  image.onload = function () {
   resolve(getBase64Image(image))
  }
  image.onerror = reject
 })
}

<template>
 <div>
   <el-upload
    ref="imgBroadcastUpload"
    :auto-upload="false" multiple
    :file-list="diaLogForm.imgBroadcastList"
    list-type="picture-card"
    :on-change="imgBroadcastChange"
    :on-remove="imgBroadcastRemove"
    accept="image/jpg,image/png,image/jpeg"
    action="">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)2M</div>
   </el-upload>
   <el-button>submitData</el-button> 
 </div>
</template>

<script>
  import { uploadImgToBase64, URLImgToBase64 } from '@/utils'
  
 export default {
  name: 'imgUpload',
  data () {
   return {
    diaLogForm: {
      goodsName:'', // 商品名稱(chēng)字段
      imgBroadcastList:[], // 儲(chǔ)存選中的圖片列表
      imgsStr:''   // 后端需要的多張圖base64字符串 , 分割
    }
   }
  },
  created(){
    this.getGoodsData()
  },
  methods: {
   // 圖片選擇后 保存在 diaLogForm.imgBroadcastList 對(duì)象中
   imgBroadcastChange (file, fileList) {
    const isLt2M = file.size / 1024 / 1024 < 2 // 上傳頭像圖片大小不能超過(guò) 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('圖片選擇失敗，每張圖片大小不能超過(guò) 2MB,請(qǐng)重新選擇!')
    } else {
     this.diaLogForm.imgBroadcastList.push(file)
    }
   },
   // 有圖片移除后 觸發(fā)
   imgBroadcastRemove (file, fileList) {
    this.diaLogForm.imgBroadcastList = fileList
   },
   // 獲取商品原有信息
   getGoodsData () {
    getCommodityById({ cid: this.diaLogForm.id }).then(res => {
     if (res.status) {
      Object.assign(this.diaLogForm, res.data)
      // 把 '1.jpg,2.jpg,3.jpg' 轉(zhuǎn)成[{url:'http://xxx.xxx.xx/j.jpg',...}] 這種格式在upload組件內(nèi)展示。 imgBroadcastList 展示原有的圖片
      this.diaLogForm.imgBroadcastList = this.diaLogForm.imgsStr.split(',').map(v => ({ url: this.BASE_URL + '/' + v })) 
     }
    }).catch(err => {
     console.log(err.data)
    })
   },
   // 提交彈窗數(shù)據(jù)
   async submitDialogData () {
    const imgBroadcastListBase64 = []
    console.log('圖片轉(zhuǎn)base64開(kāi)始...')
    this.dialogFormLoading = true
    // 并發(fā) 轉(zhuǎn)碼輪播圖片list => base64
    const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
     if (file.raw) { // 如果是本地文件
      const response = await uploadImgToBase64(file.raw)
      return response.result.replace(/.*;base64,/, '')
     } else { // 如果是在線文件
      const response = await URLImgToBase64(file.url)
      return response.replace(/.*;base64,/, '')
     }
    })
    // 按次序輸出 base64圖片
    for (const textPromise of filePromises) {
     imgBroadcastListBase64.push(await textPromise)
    }
    console.log('圖片轉(zhuǎn)base64結(jié)束...')
    this.diaLogForm.imgs = imgBroadcastListBase64.join()
    console.log(this.diaLogForm)
    if (!this.isEdit) { // 新增編輯 公用一個(gè)組件。區(qū)分接口調(diào)用
     const res = await addCommodity(this.diaLogForm)       // 提交表單
     if (res.status) {
      this.$message.success('添加成功')
     }
    } else {
     const res = await modifyCommodity(this.diaLogForm)      // 提交表單
     if (res.status) {
      this.$router.push('/goods/goods-list')
      this.$message.success('編輯成功')
     }
    }
   }
  }
 }
</script>