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