小程序上传文件至云存储的实现

在小程序云开发中,要实现上传文件至云存储,有两种方案:云函数和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>

结束语

以上仅仅只是最近项目的摘录和总结,由于涉及到一些项目隐私,所以代码并不是特别完整,但大体思路就是如此,已通过实践检验可行,希望对一些正好有此需求的朋友有所帮助!

到此这篇关于小程序外上传文件至云存储的实现的文章就介绍到这了,更多相关小程序外上传文件至云存储内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序实现图片轮播及文件上传

     微信小程序实现图片轮播及文件上传 刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传. 图片轮播: index.js <span style="font-size:14px;">var app = getApp() Page({ data:{ mode: 'aspectFit', // src:'../images/timg1.jpg', imgUrls:[ '../images/1.jpg', '../images/2.jpg', '../imag

  • 微信小程序实现文件、图片上传功能

    本文实例为大家分享了微信小程序实现文件图片上传的具体代码,供大家参考,具体内容如下 在我看来微信小程序的功能挺强大的,提供了很多API让你直接使用. 这里我说一下微信小程序如何实现图片的上传 1.在微信公众号平台设置uploadFile合法域名 点击设置-开发设置,可以看到服务器域名,点击修改,设置一下你的uploadFile合法域名. 否则会出现以下错误. 2.使用wx.chooseImage和wx.uploadFile实现图片上传 代码如下 wx.chooseImage({ count: 1

  • 小程序的上传文件接口的注意要点解析

    小程序的上传文件接口的注意 需要对接口返回的数据转换为 JavaScript 对象 // JSON.parse()将JSON格式的数据转换为 JavaScript 对象<br><br>JSON.parse(res.data) 官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html wx.chooseImage({ success (res) { const

  • PHP文件上传小程序 适合初学者学习!

    本文实例为大家分享了PHP文件上传小程序的具体代码,供大家参考,具体内容如下 废话略过,直接上代码: 首先前端代码:index.html <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>文件上传Demo</title> </head> <body> <

  • 微信小程序-拍照或选择图片并上传文件

    微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose

  • 小程序上传文件至云存储的实现

    在小程序云开发中,要实现上传文件至云存储,有两种方案:云函数和HTTP API,前者是在小程序内调用的,而后者则是在小程序外调用的.本文主要讲讲如何使用HTTP API实现小程序外上传文件至云存储. 一.原料 ① 小程序HTTP API② PHP③ Vue.js + Element UI HTTP API需要在服务器端发起调用,而这里我选择的后端语言是PHP.Element UI只是作为前端举例,我们可以用它的Upload组件来上传文件,如果是原生上传则直接用input file即可. 二.PH

  • 微信小程序上传文件到阿里OSS教程

    前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名 上传文件访问域名 这里我们要在小程序后台配置上传域名(上面的域名是我自己的申请的,后台配置的是公司的的域名,使用的时候你们用一套东西即可). 下图是bucket管理,这里可以新建文件的保存路径,域名管理. (三)服务端签名直传 点击查看文档 这里就不多做介绍了,这是上传文件到oss需要的参数,这些数据可以从后台获取. { "accessid": "

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

  • 微信小程序上传帖子的实例代码(含有文字图片的微信验证)

    public.js var graceJS = require('../../utils/grace.js'); import { config } from '../../config.js' Page({ /** * 页面的初始数据 */ data: { imglist: [], title:'', content:'', }, delImg(e) { let index = e.currentTarget.dataset.index; let array = []; console.log

  • 微信小程序上传多图到服务器并获取返回的路径

    微信小程序上传图片很简单: //点击选择图片 chooseimage:function(){ var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { that.setD

  • 微信小程序实现云开发上传文件、图片功能

    目录 一.前言 二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能 三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) 4.调用示例 4-1.云存储新建文件夹 4-2.完整调用代码 4-3.实现效果 四.结语 一.前言 今天的博客所实现的功能很简单,但是也很常用. 本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度. 实现的功能有两个: 一.选择微信聊天文件并上传. 二.选择本地相册/拍摄图片上

  • 微信小程序技巧之show内容展示,上传文件编码问题

    show内容展示 尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现 写的更少,做的更多 篇幅有限详细代码此处省略 <view class="show-warp"> <block wx:for="{{discuss}}" wx:key="index"> <template is="discuss" data="{{item}}"&

  • 微信小程序 ES6Promise.all批量上传文件实现代码

    微信小程序 ES6Promise.all批量上传文件实现代码 客户端 Page({ onLoad: function() { wx.chooseImage({ count: 9, success: function({ tempFilePaths }) { var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => { return new Promise(function(resolve, reject) { wx.

随机推荐