web直传阿里云

服务端获取签名

客服端获取签名 直传 到 阿里云oss

vue + axios + aliyunOSS + php

主要代码

/**
Toast 为手写弹窗  实际应用可忽略
*/
data(){
    return:{
        status:[], //接受状态码
    }
}

async upaliyunOss(ID, filePath,index) {
                const url = "服务器返回签名接口地址"
                let ossSign = ""
                let timeStamp = Date.parse(new Date()) + "YC" + this.RandomCode()  //获取时间戳
                this.RandomCode
                await this.$axios.get(url + ID).then(function (res) {
                    // console.log(res.data);
                    ossSign = res.data
                }).catch(err => {
                    console.log(err);
                })
                console.log(ossSign);
				//配置阿里云必要参数
                const host = ossSign.host;
                const signature = ossSign.signature;
                const ossAccessKeyId = ossSign.accessid;
                const policy = ossSign.policy;
                const callback = ossSign.callback;
                const key = ossSign.dir + "Le" + timeStamp + ".jpg";
                let fromData = new FormData();  //使用formData 传递参数
                fromData.append("name", 'file')
                fromData.append("key", key)
                fromData.append("policy", policy)
                fromData.append("OSSAccessKeyId", ossAccessKeyId)
                fromData.append("success_action_status", "200")
                fromData.append("callback", callback)
                fromData.append("signature", signature)
                fromData.append("file", filePath)
				
    			
                await this.$axios.post(host, fromData).then(res => {
                    console.log(res);
                    this.status[index] = 200  //多张图片时返回状态码，单一图片无需
                }).catch(err => {
                    console.log(err);
                    this.status[index] = false //多张图片时返回状态码，单一图片无需
                })
            },
            async onsubmit() {
				//提交时触发
                // console.log(this.empty(this.data))  //检查上传服务器的数据 每一条是否为空
                if (this.empty(this.data)) {
                    //判断手机验证码 TF
                    if (this.inputVerificationCode === this.verificationCode && this.verificationCode != "") {
                        console.log("验证通过")
                        this.isToastShow = true
                        this.isShowDialog = true
                        this.toastPicUrl = "https://****.oss-cn-chengdu.aliyuncs.com/ossStatic/staff-end-static/dialog.png"
                        this.toastTitle = "提交资料中..."
                        let index = 0  //循环调用上传的方法，给一个index 下标参数  单一图片时无需
                        for (const item of this.filePath) {
                            await this.upaliyunOss(1, item,index)
                            index ++
                        }
                        this.success()
                    } else {
                        // alert("验证码错误")
                        console.log("验证码错误")
                    }
                } else {
                    console.log("请完善信息");
                }
            },
            success(){
                let statu = false
                //对返回的状态码做处理 
                for (let item of this.status) {
                    console.log(statu)
                    if(item == 200){
                        statu = true
                        console.log(statu)
                    }else {
                        statu = false
                        console.log(statu)
                        break
                    }
                }
                console.log(this.status)
                console.log(statu)
                this.isToastShow = true
                if(statu){
                    this.isShowDialog = false
                    this.toastPicUrl = "https://****.oss-cn-chengdu.aliyuncs.com/ossStatic/staff-end-static/success.png"
                    this.toastTitle = "提交成功"
                    setTimeout(()=>{
                        //跳转到成功页面
                        window.location.href = "SuccessfulRegistration.html"
                    },2000)
                }
            },

php主要代码。PHP7.2.9

<?php
namespace app\controller\wx;
use app\traits\ControllerTrait;
use think\annotation\Route;
use think\annotation\route\Group;
use think\App;
use think\facade\Env;

/**
 * OSS上传签名返回
 * Class OssSign
 * @package app\controller\wx
 * @Group("**") // ** 为路径名，自定义
 */
class Oss extends  ControllerTrait {
    // 请填写您的AccessKeyId。
   protected $id;
    // 请填写您的AccessKeySecret。
   protected $key;
    public function __construct(App $app)
    {
        parent::__construct($app);
      $this->id= Env::get("aliyun.access_key_id");          // 请填写您的AccessKeyId。
      $this->key= Env::get("aliyun.access_key_secret");     // 请填写您的AccessKeySecret。
    }
    /**
     *  投诉建议OSS上传签名及图片路径生成返回
     * @Route("oss/complaints")
     */
    public function complaints(){
        $id=$this->id;
        $key=$this->key;
        //上传节点
        $host="https://****.aliyuncs.com"; //阿里云oss路径，
        //上传前缀
        $dir="wx-applet/";
        //获取签名
        $res=app("ossSign")->signedUrl($id,$key,$host,$dir);
        //生成图片储存路径
        $path="";   //不允许为空  根目录填写  '/'
        $res["path"]=$path;
        $this->success($res);
    }
}