小程序上傳文件至雲存儲的實現

Posted on by

在小程序雲開發中，要實現上傳文件至雲存儲，有兩種方案：雲函數和HTTP API，前者是在小程序內調用的，而後者則是在小程序外調用的。本文主要講講如何使用HTTP API實現小程序外上傳文件至雲存儲。

一、原料

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

HTTP API需要在服務器端發起調用，而這裡我選擇的後端語言是PHP。
Element UI隻是作為前端舉例，我們可以用它的Upload組件來上傳文件，如果是原生上傳則直接用input file即可。

二、PHP調用小程序HTTP API

// 獲取access_token
function getAccessToken(){
    // APPID和SECRET均可在小程序後臺獲取
    $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方式請求微信接口
    $res = json_decode($res,1);
    return $res['access_token'];
}

// 上傳文件到小程序雲存儲
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是你小程序的雲環境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請求
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請求
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);
}

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

三、使用Element UI調用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",//設置headers
        },
        data: formData
      });
      this.image = '【小程序雲存儲域名】' + path;
    }
};
</script>

結束語

以上僅僅隻是最近項目的摘錄和總結，由於涉及到一些項目隱私，所以代碼並不是特別完整，但大體思路就是如此，已通過實踐檢驗可行，希望對一些正好有此需求的朋友有所幫助！

到此這篇關於小程序外上傳文件至雲存儲的實現的文章就介紹到這瞭,更多相關小程序外上傳文件至雲存儲內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：