<template>
<view class="content">
<button type="default" @click="selectUpload">Select file upload</button>
<image v-if="fileUrl" class="image" :src="fileUrl"></image>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
fileUrl: ''
};
},
onLoad() {
},
methods: {
selectUpload() {
var vm = this;
// URL-encode more characters.
var camSafeUrlEncode = function (str) {
return encodeURIComponent(str)
.replace(/!/g, '%21')
.replace(/'/g, '%27')
.replace(/\\(/g, '%28')
.replace(/\\)/g, '%29')
.replace(/\\*/g, '%2A');
};
// Get the upload path and credential
var getUploadInfo = function (extName, callback) {
// Pass in the file extension to enable the backend to generate a random COS object path and return the upload domain name and the policy signature required by the `PostObject` API.
// Refer to the server example at https://github.com/tencentyun/cos-demo/tree/main/server/post-policy
uni.request({
url: 'http://127.0.0.1:3000/post-policy?ext=' + extName,
success: (res) => {
callback && callback(null, res.data.data);
},
error(err) {
callback && callback(err);
},
});
};
// Initiate an upload request, and the upload uses the `PostObject` API and policy signature protection.
// API documentation: https://www.tencentcloud.com/document/product/436/14690#.E7.AD.BE.E5.90.8D.E4.BF.9D.E6.8A.A4
var uploadFile = function (opt, callback) {
var formData = {
key: opt.cosKey,
policy: opt.policy, // Base64 policy string
success_action_status: 200,
'q-sign-algorithm': opt.qSignAlgorithm,
'q-ak': opt.qAk,
'q-key-time': opt.qKeyTime,
'q-signature': opt.qSignature,
};
// If the server uses a temporary key for calculation, you need to pass in `x-cos-security-token`.
if (opt.securityToken) formData['x-cos-security-token'] = opt.securityToken;
uni.uploadFile({
url: 'https://' + opt.cosHost, // This is only an example, not the real API address.
filePath: opt.filePath,
name: 'file',
formData: formData,
success: (res) => {
if (![200, 204].includes(res.statusCode)) return callback && callback(res);
var fileUrl = 'https://' + opt.cosHost + '/' + camSafeUrlEncode(opt.cosKey).replace(/%2F/g, '/');
callback && callback(null, fileUrl);
},
error(err) {
callback && callback(err);
},
});
};
// Select the file
uni.chooseImage({
success: (chooseImageRes) => {
var file = chooseImageRes.tempFiles[0];
if (!file) return;
// Get the path of the local file to upload
var filePath = chooseImageRes.tempFilePaths[0];
// Get the extension of the file to upload and then the backend can generate a random COS path
var fileName = file.name;
var lastIndex = fileName.lastIndexOf('.');
var extName = lastIndex > -1 ? fileName.slice(lastIndex + 1) : '';
// Get the domain name, path, and credential for pre-upload
getUploadInfo(extName, function (err, info) {
// Upload the file
info.filePath = filePath;
uploadFile(info, function (err, fileUrl) {
vm.fileUrl = fileUrl;
});
});
}
});
},
}
}
</script>
<style>
.content {
padding: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.image {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
</style>
Was this page helpful?