資訊專欄INFORMATION COLUMN
摘要：前言為了減輕服務器壓力，采用直傳的方式，直接把資源圖片，文件，視頻等上傳到阿里云服務器。這個是需要觸發這個回調來通知服務器操作結果。服務器端同事調的，通過接口返回給前端的。這個就是簽名，最關鍵的。的的使用如下結束這樣就搞定了。
前言：
為了減輕服務器壓力，采用web直傳的方式，直接把資源(圖片，文件，視頻等)上傳到阿里云oss服務器。但是阿里只提供 plupload.js 環境下的 demo，看著腦殼生疼。頓時覺得xx云無恥至極，極度不友好。原本這個事情沒必要浪費時間寫一篇博客來記錄，這下好了，坑夠大，為減少廣大前端朋友少踩坑，請往下看。開始：
我當時用vue做的demo，其實是互通的。angular，react自己思考。廢話不多說，直接上代碼
// vue 采用的是 axios 環境發起的 post 請求，其實就一個函數搞定，如下。
methods: {
upload(e){
// 先準備好 oss 服務器需要的內容
const photo = window.URL.createObjectURL(e.target.files[0]) // 獲取圖片對象
const photoName = photo.name // 原圖片的名稱
const key = "photoNameOss" // 存儲到oss的圖片名稱 自己定，必須確保唯一性，不然會覆蓋oss中原有的文件
const policy = "policy" // 服務器端同事調oss的API，通過接口返回給前端的 policy
const policy = "OSSAccessKeyId" // 服務器端同事調oss的API，通過接口返回給前端的 OSSAccessKeyId
const policy = "callback" // 服務器端同事調oss的API，通過接口返回給前端的 callback。這個是需要 oss 觸發這個回調來通知服務器操作結果。
const policy = "signature" // 服務器端同事調oss的API，通過接口返回給前端的 signature。這個就是簽名，最關鍵的。
const url = `http://${自己的域名}.oss-cn-beijing.aliyuncs.com`
// biu一下，提交給oss
let param = new FormData();
param.append("name", `${photoName}`)
param.append("key", `${key}`)
param.append("policy", `${policy}`)
param.append("OSSAccessKeyId", `${OSSAccessKeyId}`)
param.append("success_action_status", 200) // 不要問為什么，照做
param.append("callback", `${callback}`)
param.append("signature", `${signature}`)
param.append("file", photo, photoName); // 這個**切記**一定要放到最后去 append ，不然阿里云會一直報 key 的錯誤
axios.post(url, param)
.then(response => {
console.log("response == ", response)
})
.catch((err) => {
console.log("err == ", err)
})
}
}
一定要記住那個 切記 ，一定要把文件對象 append 到最后，一定不要忘記，這個地方我卡了2小時。
vue 的 template 的使用如下
結束：這樣就搞定了。 是不是一點都不難？ 總比被人強迫使用 plupload.js 強吧! 這輩子我都不會讓 plupload.js 進入我的插件庫，我不喜歡被強迫。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104687.html
摘要：和數據直傳到相比，以上方法有三個缺點上傳慢。端向服務端請求簽名，然后直接上傳，不會對服務端產生壓力，而且安全可靠。規定返回數據的格式，當前默認返回圖片信息寬度高度，可獲取更多數據。 背景 每個OSS的用戶都會用到上傳服務。Web端常見的上傳方法是用戶在瀏覽器或app端上傳文件到應用服務器，然后應用服務器再把文件上傳到OSS。 showImg(https://segmentfault.c...
摘要：一準備工作開通阿里云服務，從控制臺上獲取和。參考資料阿里云官方文檔開始使用阿里云官方文檔介紹如何在中快速使用訪問服務微信公眾號圖片上傳至阿里云前端圖片直傳試驗如何基于和，快速搭建音視頻文件上傳服務聲明轉發請注明出處，謝謝 一、準備工作 1. 開通阿里云OSS服務，從控制臺上獲取AccessKeyId和AccessKeySecret。 2. 創建Bucket，并登錄OSS控制臺 3. 配...
摘要：我們通過這個去解決該文章主要介紹如何獲取和這兩個參數首先下載直傳的案例解壓后打開里面的完成后就可以用瀏覽器打開按下點到選項，效果如圖我們隨便選擇一個圖片上傳然后配合來解決圖片上傳 我們通過aliyun-oss-web這個npm去解決 該文章主要介紹如何獲取 imgSignature 和 imgPolicy 這兩個參數 首先下載 web直傳的案例 ： http://files.cnblo...
摘要：但是，這里還是為大家提供加密的鏈接有問題大家一起討論，歡迎評論，點贊，收藏。 廢話不多說直接上代碼：（看到的一篇php上傳博客，進行的修改完善） .filePicker { margin: 50px; width: 200px; height: 50px; ...
閱讀 2866·2021-10-08 10:12
閱讀 3966·2021-09-22 15:45
閱讀 2555·2019-08-30 15:52
閱讀 2625·2019-08-29 18:44
閱讀 2644·2019-08-29 12:37
閱讀 1154·2019-08-26 13:36
閱讀 2561·2019-08-26 13:34
閱讀 1473·2019-08-26 12:20
