[server]基于uniapp创建小程序并上传照片到阿里云OSS

先说在前头，最近忙，随想随记，所以有些博客写了一半就发了，后续会慢慢补齐的。抱歉！

前端使用uniapp开发，后台挂在阿里云。选uniapp开发的原因是我这边人手不够，同时也不想维护这么多客户端，故选之。
新建一个uniapp工程，选择hello demo，找到pages/API/upload-file.vue文件

<template><view><page-head :title="title"></page-head><view class="uni-padding-wrap uni-common-mt"><view class="demo"><block v-if="imageSrc"><image :src="data:imageSrc" class="image" mode="widthFix"></image></block><block v-else><view class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view></block></view></view></view>
</template>
<script>export default {data() {return {title: 'uploadFile',imageSrc: ''}},onUnload() {this.imageSrc = '';},methods: {chooseImage: function() {uni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album'],success: (res) => {console.log('chooseImage success, temp path is', res.tempFilePaths[0])var imageSrc = res.tempFilePaths[0]uni.uploadFile({url: 'http://yourbucketname.oss-cn-shanghai.aliyuncs.com',filePath: imageSrc,fileType: 'image',name: 'file',formData:{name: res.tempFilePaths[0],'key' : "${filename}",'policy': 'yourpolicycaculated','OSSAccessKeyId': 'yourosskeyid', 'success_action_status' : '200', //让服务端返回200,不然，默认会返回204'signature': 'yoursignaturecaculated',},success: (res) => {console.log('uploadImage success, res is:', res)uni.showToast({title: '上传成功',icon: 'success',duration: 1000})this.imageSrc = imageSrc},fail: (err) => {console.log('uploadImage fail', err);uni.showModal({content: err.errMsg,showCancel: false});}});},fail: (err) => {console.log('chooseImage fail', err)}})}}}
</script><style>.image {width: 100%;}.demo {background: #FFF;padding: 50upx;}
</style>

问题来了，这些需要计算的formdata怎么来的，最简单的就是
阿里云官方案例

在阿里的upload.js文件中，加个函数，如下：

function consoleinfo()
{console.log('policy:'+this.policyBase64)console.log('keyid:'+this.accessid)console.log('signature:'+this.signature)
}

阿里的例子会给出计算的结果，你直接对应填进去就可以了。然而，在OSS端得到的是奇怪的文件名，

问题来自微信：

在上图可以看到，temp path已经被微信小程序改了，所以啊我们OSS获得的就是被改掉的名字了。一般地，我们自己应该对上传到OSS的文件进行命名。如果一定要真实的名字，我找找解决办法再补上来

第二个问题：签名密钥放前端肯定是不行的，那如何放在后台呢，pages/API/upload-file.vue文件修改后如下：

<template><view><page-head :title="title"></page-head><view class="uni-padding-wrap uni-common-mt"><view class="demo"><block v-if="imageSrc"><image :src="data:imageSrc" class="image" mode="widthFix"></image></block><block v-else><view class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view></block></view></view></view>
</template>
<script>const requestUrl = 'http://xxx.xx.xxx.xxx:xxxx'//用你自己的server + portexport default {data() {return {title: 'uploadFile',imageSrc: ''}},onUnload() {this.imageSrc = '';},methods: {sendRequest: async function() {let that = thisreturn await new Promise((resolve,reject)=>{uni.request({url: requestUrl,dataType: 'text',data: {noncestr: Date.now()},success: (res) => {console.log('request success', res)uni.showToast({title: '请求成功',icon: 'success',mask: true,duration: 2000});resolve(JSON.parse(res.data))},fail: (err) => {console.log('request fail', err);uni.showModal({content: err.errMsg,showCancel: false});},complete: () => {this.loading = false;}});})},chooseImage: function() {let that = thisuni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album'],success: (res) => {console.log('chooseImage success, temp path is', res.tempFilePaths[0])var imageSrc = res.tempFilePaths[0]that.sendRequest().then((resdata)=>{console.log('wearehere')console.log(that === this)uni.uploadFile({url: resdata.host,filePath: imageSrc,fileType: 'image',name: 'file',formData:{name: res.tempFilePaths[0],key : "root/20190319.jpg",//我放在root下，你视情况而定policy: resdata.policy,OSSAccessKeyId: resdata.accessid, success_action_status : '200', //让服务端返回200,不然，默认会返回204signature: resdata.signature,},success: (res) => {console.log('uploadImage success, res is:', res)uni.showToast({title: '上传成功',icon: 'success',duration: 1000})console.log(that === this)this.imageSrc = imageSrc},fail: (err) => {console.log('uploadImage fail', err);uni.showModal({content: err.errMsg,showCancel: false});}});                       });},fail: (err) => {console.log('chooseImage fail', err)}})}}}
</script><style>.image {width: 100%;}.demo {background: #FFF;padding: 50upx;}
</style>

老生常谈的几个问题：

this指向：
我在好几处都console了that === this，真心被搞得懵逼，微信的代码风格是：进函数就先来个
let that = this，这确实是个规避this作用域的好办法。然而，uniapp有时候在内部还在用this，这个this到底指向哪里，所以我加了判断输出
结论：this指向当前的执行对象或者说执行环境。执行对象不变，指向也不变。在chooseimage后，函数层层调用，执行对象一直没变，因此this指向不变。具体this辨析，可参考阮一峰大神的博客
var let const对比：
假定你有C/C++基础哈，在C/C++中，你用{}扩起一段原本已经是个整体的代码是多此一举的，比如：

a = 0;
{a ++;
}
a++;

这个大括号去掉也不影响，但是在js中，{}表示块，也就引入了块作用域的概念。

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。这个跟C/C++中的局部变量一回事

let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。let类似于var，只不过是用在块里的局部变量

const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。简言之，const是一个具有初值且不能被修改的let

关于三者对比，可参考阮一峰大神博客

异步实现：
之前代码的思路是，直接request 我的server，拿到签名报上去。然而，这是不行的。因为，request是异步的，不是立马就能拿到返回结果的。而后续的upload参数依赖request的返回值，所以必须在request完成后才能搞upload的事情。因此，我加入了promise.then结构。

下面再说服务器配置：
A. 请参考阿里云官方案例Go
B. 请按要求改写服务器地址以及端口
C. 启动服务器端口侦听，注意注意注意：
执行这条语句开启侦听1234端口，go run appserver.go 0.0.0.0 1234

作为一个小白，我按阿里云的案例多次尝试都不行，找了一些资料，有人说是0 0 0 0就OK。虽然没问题了，但是没找到原因。路过的朋友知道的帮个忙解释一下啊，多谢多谢

[server]基于uniapp创建小程序并上传照片到阿里云OSS相关推荐

微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
【微信小程序】上传文件到阿里云OSS
小程序上传文件到OSS也是利用OSS提供的PostObject接口来实现表单文件上传到OSS 步骤1:配置Bucket跨域访问客户端进行表单直传到OSS时,会从浏览器向OSS发送带有Origin的请 ...
java上传文件至阿里云oss工具类
第一步:引入oss maven坐标 <dependency><groupId>com.aliyun.oss</groupId><artifactId>a ...
阿里云 aliyun 人脸识别（1：N） java spring 小程序小程序上传多图阿里云oss
前段时间开发一个小程序需要使用到阿里云(1:N)人脸识别的服务,查询资料发现网上并没有详细的教程,而官方的api文档也写得很简略,于是就有了如下教程,希望能帮助到大家. 目录服务开通人脸识别服务开 ...
微信小程序（上传照片功能、统计字数功能）
微信小程序仿淘宝申请界面中的"申请描述" 效果图:(上传照片功能.统计字数功能) .wxml : <view class="apply-describe" ...
go walk 开发window界面，上传文件到阿里云oss -- 服务器端
前面我们完成了一个网页端的上传oss程序:https://blog.csdn.net/daily886/article/details/103366145 现在我们把前后端分离前端使用walk开发, ...
go 使用 gin 上传文件到阿里云oss存储
本文使用 go 版本是: go version go1.13 linux/amd64 阿里云oss go sdk版本:v2.0.4 官网可以下载 linux版本是:Linux version 3.1 ...
vue 上传文件至阿里云oss
先让后端在阿里云里面处理跨域问题参考这篇文章 vue直传图片到阿里云OSS(单张直接上传)__小郑有点困了的博客-CSDN博客_vue 阿里云背景:近期项目使用到多图片上传功能,常规的调用后端接 ...
Erlang上传文件至阿里云OSS
忙了快一个月忘记写博客这茬了,正好今天阿里云工作人员又给我打电话我才想起我还买过一个OSS资源包,今天写一个如何调用Erlang代码来将文件资源上传至OSS对象存储中. 前言 OSS对象存储的服务不必 ...

[server]基于uniapp创建小程序并上传照片到阿里云OSS

[server]基于uniapp创建小程序并上传照片到阿里云OSS相关推荐

最新文章

热门文章