快捷導(dǎo)航

小程序上傳文件至云存儲(chǔ)的實(shí)現(xiàn)

更新時(shí)間：2022年01月24日 09:54:16 作者：前端王睿

在小程序云開發(fā)中，要實(shí)現(xiàn)上傳文件至云存儲(chǔ)，有兩種方案：云函數(shù)和HTTP?API，本文主要講講如何使用HTTP?API實(shí)現(xiàn)小程序外上傳文件至云存儲(chǔ)，感興趣的可以了解一下

在小程序云開發(fā)中，要實(shí)現(xiàn)上傳文件至云存儲(chǔ)，有兩種方案：云函數(shù)和HTTP API，前者是在小程序內(nèi)調(diào)用的，而后者則是在小程序外調(diào)用的。本文主要講講如何使用HTTP API實(shí)現(xiàn)小程序外上傳文件至云存儲(chǔ)。

一、原料

① 小程序HTTP API
② PHP
③ Vue.js + Element UI

HTTP API需要在服務(wù)器端發(fā)起調(diào)用，而這里我選擇的后端語(yǔ)言是PHP。
Element UI只是作為前端舉例，我們可以用它的Upload組件來(lái)上傳文件，如果是原生上傳則直接用input file即可。

二、PHP調(diào)用小程序HTTP API

// 獲取access_token
function getAccessToken(){
? ? // APPID和SECRET均可在小程序后臺(tái)獲取
? ? $appid = 'APPID';
? ? $secret = 'SECRET';
? ? $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".?
$appid ."&secret=". $secret;
? ? $res = curl_get($url); ?// 使用GET方式請(qǐng)求微信接口
? ? $res = json_decode($res,1);
? ? return $res['access_token'];
}

// 上傳文件到小程序云存儲(chǔ)
function upload(){
? ? $path = $_REQUEST['path'];
? ? $url = "https://api.weixin.qq.com/tcb/uploadfile?access_token=". getAccessToken();
? ? $data = array ('path' => $path,'env' => APP_CLOUD_ID); ?// APP_CLOUD_ID是你小程序的云環(huán)境ID
? ? $res = json_decode(request($url, $data),1);
? ? $fileName = $_FILES['file']['tmp_name'];
? ? $handle = fopen($fileName,"r");
? ? $file = fread($handle,filesize($fileName));
? ? curl_post(
? ? ? ? $res['url'],?
? ? ? ? array (
? ? ? ? ? ? 'key' => $path,
? ? ? ? ? ? 'Signature' => $res['authorization'],
? ? ? ? ? ? 'x-cos-security-token' => $res['token'],
? ? ? ? ? ? 'x-cos-meta-fileid' => $res['cos_file_id'],
? ? ? ? ? ? 'file' => $file,
? ? ? ? )
? ? );
? ? echo json_encode(array(
? ? ? ? 'code' => 200,
? ? ? ? 'msg' => '文件上傳成功',
? ? ? ? 'data' => $res['file_id']
? ? ));
}

// get請(qǐng)求
function curl_get($url) {
? ? $ch = curl_init();
? ? curl_setopt($ch, CURLOPT_URL, $url);
? ? curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
? ? curl_setopt($ch, CURLOPT_HEADER, 0);
? ? return curl_exec($ch);
? ? curl_close($ch);
}

// post請(qǐng)求
function curl_post($url, $data){
? ? $ch = curl_init();
? ? curl_setopt($ch, CURLOPT_URL, $url);
? ? curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
? ? curl_setopt($ch, CURLOPT_POST, 1);
? ? curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
? ? return curl_exec($ch);
? ? curl_close($ch);
}

有關(guān)文件上傳的HTTP API具體用法可參考：獲取文件上傳鏈接

三、使用Element UI調(diào)用PHP接口

// VueJS
<template>
? <el-upload
? ? ? class="avatar-uploader"
? ? ? :action=""
? ? ? accept="image/*,.jpg"
? ? ? :http-request="upload"
? ? ? :show-file-list="false"
? >
? ? <img v-if="image" :src="image" class="avatar" />
? ? <i v-else class="el-icon-plus avatar-uploader-icon"></i>
? </el-upload>
</template>

<script>
import axios from 'axios'
const request = axios.create({
? baseURL: process.env.BASE_API, // api 的 base_url
? timeout: 20000
});

export default {
? data() {
? ? return {
? ? ? image: ''
? ? };
? },
? methods: {
? ? async upload(e) {
? ? ? let formData = new FormData();
? ? ? let path = `upload/${new Date().getTime() + e.file.name.match(/\.(.*)/)[0]}`;
? ? ? formData.append("path", path);
? ? ? formData.append("file", e.file);
? ? ? await request({
? ? ? ? url: '/api/upload', ?// php提供的上傳接口
? ? ? ? method: 'post',
? ? ? ? headers: {
? ? ? ? ? ? "Content-Type": "multipart/form-data",//設(shè)置headers
? ? ? ? },
? ? ? ? data: formData
? ? ? });
? ? ? this.image = '【小程序云存儲(chǔ)域名】' + path;
? ? }
};
</script>