背景：

近期項目使用到多圖片上傳功能，常規的調用后端接口上傳，可能會出現上傳速度慢，體驗不佳的情況。那么就考慮另一種上傳方式。由前端直接上傳到oss?？斓囊黄ァ?。。
經過摸索，也實現了。代碼其實沒啥難度，問題都出在阿里云這里，例如：跨域，讀寫權限等等，以及一個十分惡心的坑（竟然不能把目標文件夾寫到配置參數里面，就很無語，百試不得，后來拼在了圖片路徑前面，達到了效果）

首先你得去阿里云開啟一個對象存儲oss服務：

略

還得去創建一個AccessKey

這兩個是關鍵項

還得創建一個bucket，用于存放你的東西

這里面你可以創建文件夾，將圖片指定到這個文件夾了，就不會雜亂的放在公共目錄了，當然這個創建文件件的操作，最好是交給后端來做，在請求接口拿secretKey這些東西的時候，讓后端一并返回。

讀寫權限打開：

改成公共讀寫

創建跨域規則

1，

2，

3，

4，規則如下：

---

以上已做好所有準備，可以去vue項目中編寫上傳相關代碼了

---

安裝ali-oss

npm install ali-oss

vue代碼：

<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（单张直接上传）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。