使用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,
 })
 // 按次序

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 { // 如果是在線(xiàn)文件
 const response = await URLImgToBase64(file.url)
 return response.replace(/.*;base64,/, '')
 }
 })
 // 按次序