vue直传图片到阿里云OSS(单张直接上传)
生活随笔
收集整理的這篇文章主要介紹了
vue直传图片到阿里云OSS(单张直接上传)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
背景:
近期項目使用到多圖片上傳功能,常規的調用后端接口上傳,可能會出現上傳速度慢,體驗不佳的情況。那么就考慮另一種上傳方式。由前端直接上傳到oss??斓囊黄ァ?。。
經過摸索,也實現了。代碼其實沒啥難度,問題都出在阿里云這里,例如:跨域,讀寫權限等等,以及一個十分惡心的坑(竟然不能把目標文件夾寫到配置參數里面,就很無語,百試不得,后來拼在了圖片路徑前面,達到了效果)
首先你得去阿里云開啟一個對象存儲oss服務:
略
還得去創建一個AccessKey
這兩個是關鍵項
還得創建一個bucket,用于存放你的東西
這里面你可以創建文件夾,將圖片指定到這個文件夾了,就不會雜亂的放在公共目錄了,當然這個創建文件件的操作,最好是交給后端來做,在請求接口拿secretKey這些東西的時候,讓后端一并返回。
讀寫權限打開:
改成公共讀寫
創建跨域規則
1,
2,
3,
4,規則如下:
以上已做好所有準備,可以去vue項目中編寫上傳相關代碼了
安裝ali-oss
npm install ali-ossvue代碼:
<template><el-upload class="avatar-uploader" action="" v-model="Addfrom.url" :http-request="uploadURL":multiple = true :before-upload="handleBeforeUpload" :limit="8"><img v-if="Addfrom.url" :src="Addfrom.url" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload> </template> <script>import {client, getFileNameUUID} from './alioss.js'export default {data() {return {fileList: [],Addfrom:{url:''}};},methods: {// 上傳文件之前handleBeforeUpload(file) {const isJPEG = file.name.split('.')[1] === 'jpeg';const isJPG = file.name.split('.')[1] === 'jpg';const isPNG = file.name.split('.')[1] === 'png';const isWEBP = file.name.split('.')[1] === 'webp';const isGIF = file.name.split('.')[1] === 'gif';const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {this.$message.error('上傳圖片只能是 JPEG/JPG/PNG 格式!');}if (!isLt500K) {this.$message.error('單張圖片大小不能超過 4mb!');}return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;},uploadURL(file) {//注意哦,這里指定文件夾'image/',嘗試過寫在配置文件,但是各種不行,寫在這里就可以var fileName = 'image/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; //定義唯一的文件名,打印出來的uid其實就是時間戳client().multipartUpload(fileName, file.file,{progress: function(percentage, cpt) {console.log('打印進度',percentage)}}).then((res)=>{//此處賦值,是相當于上傳成功之后,手動拼接服務器地址和文件名this.Addfrom.url = 'https://xxx-oss.oss-cn-beijing.aliyuncs.com/' + fileName;})},}} </script>alioss.js
// var OSS = require('ali-oss'); import OSS from "ali-oss"; export function client(){var client = new OSS({endpoint: 'oss-cn-beijing.aliyuncs.com',//填寫Bucket所在地域accessKeyId: 'LTAxxxxxxxxxxxxxxxxxxxRAQn',accessKeySecret: 'NxexxxxxxxxxxxxxxxxxxxxxxGG2',bucket: 'zyp-oss',// 填寫Bucket名稱。}) //后端提供數據 return client } /*** 生成隨機uuid*/ export const getFileNameUUID = () => {function rx() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)}return `${+new Date()}_${rx()}${rx()}` }頁面效果:
點擊選擇文件
上傳成功回顯
看看oss中
兩種上傳方式的區別:
見阿里:添加鏈接描述
put:簡單上傳,不可使用進度條
MultipartUpload:分片上傳
END
總結
以上是生活随笔為你收集整理的vue直传图片到阿里云OSS(单张直接上传)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JVM运行参数之-X和-XX参数
- 下一篇: element-ui vue-quill