add 阿里云oss
This commit is contained in:
heyi
@@ -3,7 +3,7 @@
|
||||
<view class="htz-image-upload-Item" v-for="(item,index) in uploadLists" :key="index">
|
||||
<view class="htz-image-upload-Item-video" v-if="isVideo(item)">
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<video :disabled="false" :controls="false" :src="getFileUrl(item)">
|
||||
<video :play-strategy="1" :http-cache="true" :disabled="false" :controls="false" :src="getFileUrl(item)">
|
||||
<cover-view class="htz-image-upload-Item-video-fixed" @click="previewVideo(getFileUrl(item))">
|
||||
</cover-view>
|
||||
|
||||
@@ -59,12 +59,26 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
ossUpload
|
||||
ossUpload,
|
||||
random_string,
|
||||
get_suffix
|
||||
} from '@/utils/jason-alioss-upload/oss.js';
|
||||
import config from '@/config';
|
||||
import {
|
||||
getToken
|
||||
} from '@/utils/auth';
|
||||
import {
|
||||
Base64
|
||||
} from '@/utils/jason-alioss-upload/base64.js'
|
||||
import {
|
||||
util
|
||||
} from '@/utils/jason-alioss-upload/crypto.js'
|
||||
import {
|
||||
HMAC
|
||||
} from '@/utils/jason-alioss-upload/hmac.js'
|
||||
import {
|
||||
SHA1
|
||||
} from '@/utils/jason-alioss-upload/sha1.js'
|
||||
export default {
|
||||
name: 'htz-image-upload',
|
||||
props: {
|
||||
@@ -162,7 +176,10 @@
|
||||
upLoadUrl: config.fileUploadUrl,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken()
|
||||
}
|
||||
},
|
||||
ossUrl: config.aliyunOssUrl,
|
||||
OSSAccessKeyId: config.OSSAccessKeyId,
|
||||
OssAccesskeySercet: config.OssAccesskeySercet,
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
@@ -488,7 +505,8 @@
|
||||
return;
|
||||
}
|
||||
if (this.action == 'aliyun') {
|
||||
|
||||
|
||||
this.aliyunUpLoad(tempFilePaths, type)
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
@@ -579,6 +597,118 @@
|
||||
this.$emit("uploadFail", res);
|
||||
});
|
||||
},
|
||||
aliyunUpLoad(tempFilePaths, type) {
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
console.log("阿里云上传");
|
||||
const policyText = {
|
||||
"expiration": "2064-01-01T12:00:00.000Z", // 设置Policy的有效期，格式为UTC时间。如果Policy失效，将无法上传文件。
|
||||
"conditions": [
|
||||
["content-length-range", 0,
|
||||
1048576000] // 限制上传文件的大小，单位为字节，此处限制文件大小为1 GB。如果上传的文件大小超过此限制，文件将无法上传到OSS。如果未设置该限制，则默认文件大小最大为5 GB。
|
||||
]
|
||||
}
|
||||
const policy = Base64.encode(JSON.stringify(policyText))
|
||||
const bytes = HMAC(SHA1, policy, this.OssAccesskeySercet, {
|
||||
asBytes: true
|
||||
})
|
||||
const signature = util.bytesToBase64(bytes)
|
||||
console.log('imgUpload', tempFilePaths)
|
||||
let uploadImgs = [];
|
||||
tempFilePaths.forEach((item, index) => {
|
||||
uploadImgs.push(new Promise((resolve, reject) => {
|
||||
//console.log(index, item)
|
||||
const name = item;
|
||||
const OSSAccessKeyId = this.OSSAccessKeyId;
|
||||
const key = config.OssDir + random_string(10) + get_suffix(item)
|
||||
const uploadTask = uni.uploadFile({
|
||||
url: this.ossUrl, //仅为示例，非真实的接口地址
|
||||
filePath: item,
|
||||
name: this.name,
|
||||
fileType: 'image',
|
||||
formData: {
|
||||
name,
|
||||
key,
|
||||
policy,
|
||||
OSSAccessKeyId,
|
||||
success_action_status: '200',
|
||||
signature
|
||||
},
|
||||
header: this.headers,
|
||||
success: (uploadFileRes) => {
|
||||
uni.hideLoading();
|
||||
//console.log(typeof this.uploadSuccess)
|
||||
console.log('oss uploadFileRes', uploadFileRes)
|
||||
uploadFileRes.fileType = type
|
||||
let thisUploadSuccess = {
|
||||
success: true,
|
||||
url: this.ossUrl + '/' + key
|
||||
}
|
||||
console.log("oss success", thisUploadSuccess);
|
||||
if (thisUploadSuccess.success) {
|
||||
let keyName = '';
|
||||
// #ifndef VUE3
|
||||
keyName = 'value'
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
keyName = 'modelValue'
|
||||
// #endif
|
||||
if (this.dataType == 0) {
|
||||
this[keyName].push(thisUploadSuccess.url)
|
||||
} else {
|
||||
this[keyName].push({
|
||||
type: type,
|
||||
url: thisUploadSuccess.url,
|
||||
...thisUploadSuccess
|
||||
})
|
||||
}
|
||||
|
||||
//this.$emit("input", this.uploadLists);
|
||||
// #ifndef VUE3
|
||||
this.$emit("input", this.uploadLists);
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
this.$emit("update:modelValue", this.uploadLists);
|
||||
// #endif
|
||||
}
|
||||
resolve(uploadFileRes);
|
||||
this.$emit("uploadSuccess", uploadFileRes);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
uni.hideLoading();
|
||||
reject(err);
|
||||
this.$emit("uploadFail", err);
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
uploadTask.onProgressUpdate((res) => {
|
||||
console.log('上传进度' + res.progress);
|
||||
console.log('已经上传的数据长度' + res.totalBytesSent);
|
||||
console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
|
||||
|
||||
// if (res.progress == 100) {
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
// 测试条件，取消上传任务。
|
||||
// if (res.progress > 50) {
|
||||
// uploadTask.abort();
|
||||
// }
|
||||
});
|
||||
}))
|
||||
})
|
||||
Promise.all(uploadImgs) //执行所有需请求的接口
|
||||
.then((results) => {
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch((res, object) => {
|
||||
uni.hideLoading();
|
||||
this.$emit("uploadFail", res);
|
||||
});
|
||||
},
|
||||
uniCloudUpload(tempFilePaths, type) {
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
|
||||
@@ -7,6 +7,7 @@ module.exports = {
|
||||
aliyunOssUrl: "https://jimte.oss-cn-hangzhou.aliyuncs.com",
|
||||
OSSAccessKeyId: "LTAI5tFZzfAMHw3WJNQtrhBZ",
|
||||
OssAccesskeySercet: "rqZUht8RhrAfxDltWeGs1Yzpqzmu8W",
|
||||
OssDir: "ossimg/",
|
||||
// 应用信息
|
||||
appInfo: {
|
||||
// 应用名称
|
||||
|
||||
@@ -32,6 +32,21 @@
|
||||
<lxk-image-upload v-model="video4">
|
||||
</lxk-image-upload>
|
||||
</view>
|
||||
|
||||
<label for="">oss图片上传组件</label>
|
||||
<view class="video-upload">
|
||||
<!-- <video-upload v-model="video" /> -->
|
||||
<lxk-image-upload v-model="video5" action="aliyun">
|
||||
</lxk-image-upload>
|
||||
</view>
|
||||
|
||||
<label for="">oss视频上传组件</label>
|
||||
<view class="video-upload">
|
||||
<!-- <video-upload v-model="video" /> -->
|
||||
<lxk-image-upload v-model="video6" action="aliyun">
|
||||
</lxk-image-upload>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="">
|
||||
<label>轮播图组件</label>
|
||||
@@ -63,6 +78,8 @@
|
||||
video2: [],
|
||||
video3: [],
|
||||
video4: [],
|
||||
video5: [],
|
||||
video6: [],
|
||||
upLoadUrl: config.fileUploadUrl,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken()
|
||||
|
||||
@@ -22,7 +22,7 @@ const bytes = HMAC(SHA1, policy, OssAccesskeySercet, { asBytes: true })
|
||||
const signature = util.bytesToBase64(bytes)
|
||||
|
||||
// 生成文件名随机字符串
|
||||
function random_string(len) {
|
||||
export const random_string = (len) => {
|
||||
const strLeng = len || 32;
|
||||
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
|
||||
const maxPos = chars.length;
|
||||
@@ -34,7 +34,7 @@ function random_string(len) {
|
||||
}
|
||||
|
||||
// 获取文件后缀
|
||||
function get_suffix(filename) {
|
||||
export const get_suffix = (filename) => {
|
||||
const pos = filename.lastIndexOf('.')
|
||||
let suffix = ''
|
||||
if (pos != -1) {
|
||||
|
||||
Reference in New Issue
Block a user