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