图片上传
服务器加密后web直传
参考链接：help.aliyun.com/document_de…
添加callback，返回给应用服务器图片地址
- 用户向应用服务器取到上传policy和回调设置。
- 应用服务器返回上传policy和回调。
- 用户直接向OSS发送文件上传请求。
- 等文件数据上传完，OSS给用户Response前，OSS会根据用户的回调设置，请求用户的服务器。
- 如果应用服务器返回成功，那么就返回用户成功，如果应用服务器返回失败，那么OSS也返回给用户失败。这样确保了用户上传成功的照片，应用服务器都已经收到通知了。
- 应用服务器给OSS返回。
- OSS将应用服务器返回的内容返回给用户。
- 从后端获取参数
{
'key' : g_object_name,
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status' : '200', //让服务端返回200，否则默认返回204。
'callback' : callbackbody,
'signature': signature,
}
2.直传oss，返回给应用服务器，返回给客户端（oss回调-> 服务端处理callback -> 返回url给客户端）
代码vue+element ui(el-upload)
<template>
<div>
<el-upload
class="jupload-text"
action="#"
:show-file-list="false"
:http-request="httpRequestHandle"
>
<div v-if="imgurl" class="img-block">
<span class="delete-i" @click="deleteimgHandle">重新选择</span>
<el-image :src="imgurl" class="img"></el-image>
</div>
<div v-else class="el-upload__text" v-loading="uploading">
<i class="el-icon-plus"></i>
<p>{{ text }}</p>
</div>
</el-upload>
</div>
</template>
<script>
import { getOssKey, uploadImgOss } from "@/api/tool/upload";
export default {
props: ["text", "imgurl"],
data() {
return {
uploading: false
};
},
methods: {
// 给修改props
emitUpdateImg(val) {
this.$emit("update:imgurl", val);
},
httpRequestHandle(options) {
this.uploading = true;
let { file } = options;
// console.log(options);
getOssKey().then(res => {
let { data } = res;
if (!data.policy) return;
uploadImgOss(data, file).then(res => {
// console.log(res.data);
this.uploading = false;
this.emitUpdateImg(URL.createObjectURL(file));
this.$emit("getImgUrl", res.data);
});
});
},
deleteimgHandle() {
this.emitUpdateImg("");
}
}
};
</script>
<style lang="scss" scoped>
.jupload-text {
.img-block {
position: relative;
.delete-i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 180px;
font-size: 16px;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
z-index: 1;
color: #eee;
}
&:hover {
.delete-i {
opacity: 1;
}
}
.img {
width: 180px;
height: 180px;
}
}
.el-upload__text {
width: 180px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
&:hover {
border-color: #409eff;
}
i {
font-size: 28px;
color: #8c939d;
}
p {
font-size: 12px;
padding: 0 15px;
line-height: 20px;
}
}
}
</style>
接口api, request（axios封装)
// oss获取服务器签名
export function getOssKey() {
return request({
url: "/getOssPolicy",
method: "get",
params: { fileId: "fff" }
});
}
export function uploadImgOss(data, file) {
let { ossAccessKeyId, policy, signature, host, callback } = data;
let formData = new FormData();
// console.log(file.name);
formData.append("key", `${new Date().getTime()}_${file.name}`);
formData.append("success_action_status", 200);
formData.append("OssAccessKeyId", ossAccessKeyId);
formData.append("policy", policy);
formData.append("signature", signature);
formData.append("callback", callback);
formData.append("file", file); // 必须放在最后
// var jsonData = {};
// formData.forEach((value, key) => (jsonData[key] = value));
// console.log(jsonData);
return request({
method: "post",
url: host,
data: formData
});
}
调用
<JUpload
text="待上传"
:imgurl.sync="erweimaDialog.authTaxQrcodeUrl"
@getImgUrl="url => (erweimaParams.qrCodeUrl = url)"
/>
ssr上传
1.安装依赖包**
npm install ali-oss
2.编写client
//
getOssKey().then((res) => {
client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
region: "oss-cn-hangzhou",
// 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
accessKeyId: res.row.access_key_id,
accessKeySecret: res.row.access_key_secret,
stsToken: res.row.security_token,
// 填写Bucket名称。
bucket: "csyp123",
});
});
3.上传
const httpRequestHandle = async (options) => {
let { file } = options;
let fileName = new Date().getTime() + file.name;
let result = await client.put("/image/" + fileName, file);
console.log(result.url);
};
明文密码
前端项目，基于vue框架实现阿里云图片上传(单张)
1.安装依赖包**
npm install ali-oss
2.编写alioss.js**
var OSS = require('ali-oss')
export function client() {
var client = new OSS({
region: 'oss-cn-beijing',
accessKeyId: 'LTAIDZ8c2xxx',
accessKeySecret: 'yXOfrXPiuywxxxxx',
bucket: 'judian-image'
}) //后端提供数据
return client
}
3.直接使用**
import { client } from 'utils/alioss'
...
methods: {
// 使用vant的<van-uploader ...:after-read="onReadImg">
onReadImg(file) {
this.hrefObj.link_img = file.content
file = file.file
var fileName = `${new Date().getTime()}href_${file.name}`
// ali oss直传
client().put(fileName, file).then(
result => {
console.log(result)
this.hrefObj.link_img = result.url
})
}
}
视频点播
在使用vue做前端项目需求视频直传阿里云服务器 参考文档（阿里云官方） help.aliyun.com/document_de…
导入官方sdk
<script src="/static/aliyun/aliyun-oss-sdk-5.2.0.min.js"></script>
<script src="/static/aliyun/aliyun-upload-sdk-1.4.0.min.js"></script>
input的@change事件
change(event) {
let file = event.target.files[0]
let url = URL.createObjectURL(file)
this.getVideoUploadAuth(file) //获取上传权限
}
采用UploadAuthAndAddress上传方式，后台php获取相关权限
getVideoUploadAuth(file) {
let path = document.getElementById('file').value
let params = {
video_title: file.name,
video_url: path
}
axios.post('https://xxx/aliapi/upload.php', params).then(res => {
uploadAuth = res.data.UploadAuth
uploadAddress = res.data.UploadAddress
videoId = res.data.VideoId
uploader.addFile(file, null, null, null, userData);
this.videoUploadFn() //去上传
})
}
去上传
videoUploadFn() {
uploader.startUpload();
_videoUploadSuccess.ok = false
let interval = setInterval(() => {
if(_videoUploadSuccess.ok) {
clearInterval(interval)
this.getVideoInfo() // 获取视频信息得到视频封面图片
}
, 10);
}
获取视频信息
getVideoInfo() {
let sett
this.$post(`https://xxxx/ali/info.php`,{videoId :_videoUploadSuccess.uploadInfo.videoId}).then(res => {
res = res.data
xmview.showLoading('正在获取缩略图..')
if (res.Video.CoverURL) {
this.posterimg = res.Video.CoverURL
sessionStorage.setItem('video_content',_videoUploadSuccess.uploadInfo.videoId)
sessionStorage.setItem('video_thumb',res.Video.CoverURL)
xmview.hideLoading()
clearTimeout(sett)
} else {
// 这里加定时器，等待响应
sett = setTimeout(() => {
this.getVideoInfo()
}, 3000);
}
})
}
下面是sdk设置
var uploadAuth = ''
var uploadAddress = ''
var videoId = ''
var _videoUploadSuccess = {
ok: false,
uploadInfo: {}
}
var _uploadprogress = 0 // 上传进度
const uploader = new AliyunUpload.Vod({
//分片大小默认1M，不能小于100K
partSize: 1048576,
//并行上传分片个数，默认5
parallel: 5,
//网络原因失败时，重新上传次数，默认为3
retryCount: 3,
//网络原因失败时，重新上传间隔时间，默认为2秒
retryDuration: 2,
// 开始上传
'onUploadstarted': function(uploadInfo) {
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
//上传方式1, 需要根据uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress，如果videoId有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
},
// 文件上传成功
'onUploadSucceed': function(uploadInfo) {
_videoUploadSuccess.ok = true
_videoUploadSuccess.uploadInfo = uploadInfo
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
},
// 文件上传失败
'onUploadFailed': function(uploadInfo, code, message) {
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
},
// 文件上传进度，单位：字节
'onUploadProgress': function(uploadInfo, totalSize, loadedPercent) {
_uploadprogress = Math.ceil(loadedPercent * 100)
console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
},
// 上传凭证超时
'onUploadTokenExpired': function(uploadInfo) {
console.console.log("onUploadTokenExpired");
//上传方式1 实现时，根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
uploader.resumeUploadWithAuth(uploadAuth);
// 上传方式2 实现时，从新获取STS临时账号用于恢复上传
// uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
},
//全部文件上传结束
'onUploadEnd': function(uploadInfo) {
console.log("onUploadEnd: uploaded all the files");
}
});
const userData = '{"Vod":{"UserData":{"IsShowWaterMark":"false","Priority":"7"}}}'
