微信小程序上传图片到阿里云OSS

微信小程序代码1.wxml:<image src="{{userInfo.headImg}}" class="user-head_img" bindtap="uploadHeadImg"></image>2.js:uploadHeadImg: function () {const that = this;wx.chooseImage({count: 1,sizeType:

码路CodeWay

1854人浏览 · 2022-04-28 11:13:58

码路CodeWay · 2022-04-28 11:13:58 发布

微信小程序代码

1.wxml:

<image src="{{userInfo.headImg}}" class="user-head_img" bindtap="uploadHeadImg"></image>

2.js:

uploadHeadImg: function () {
    const that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        that.uploadFile(res.tempFilePaths[0]);
      }
    })
  },
  uploadFile: function (filePath) {
    const folder = "user_headImg";
    let fileName = "";
    if (filePath) {
      fileName = folder + filePath.substr(filePath.lastIndexOf('.'), filePath.length);
    }

    const payload = { fileName, folder };
    //调用接口获取签名
    sysOss.sign(payload, (data) => {
      const key = data.path;
      const policy = data.policy;
      const signature = data.signature;
      const accessId = data.accessId;

      let formData = {};
      formData.key = key;
      formData.policy = policy;
      formData.signature = signature;
      formData.OSSAccessKeyId = accessId;

      wx.uploadFile({
        url: 'https://test.oss-cn-zhangjiakou.aliyuncs.com ', //这个地址必须在微信小程序后台》》开发》》开发工具》》服务器域名》》uploadFile合法域名上面添加上去
        filePath: filePath,
        name: 'file',
        formData,
        success(res) {
          const data = res.data
          //do something
        }
      })
    });
  }

wx.uploadFile官网介绍：UploadTask | 微信开放文档
wx.chooseImage官网介绍：wx.chooseImage(Object object) | 微信开放文档

获取阿里云OSS签名JAVA接口

package com.vg.controller.sys;

import com.aliyun.oss.OSSClient;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.vg.data.enums.ProfileActive;
import com.vg.data.vo.Result;
import com.vg.data.vo.ResultCode;
import com.vg.parameter.AliYunParameter;
import com.vg.parameter.SysParameter;
import com.vg.util.VgStringUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;

@Slf4j
@RestController
@RequestMapping("sys/oss")
public class SysOssController
{

    /**
     * 获取阿里云OSS签名
     *
     * @param fileName 文件名称
     * @param folder   文件夹
     * @return
     */
    @GetMapping(value = "/sign")
    public Result<Map<String, String>> sign(@RequestParam String fileName, @RequestParam String folder)
    {
        OSSClient client = new OSSClient(AliYunParameter.ossEndpoint, AliYunParameter.accessKeyId,
                AliYunParameter.accessKeySecret);

        String dir = "";
        if (VgStringUtil.isNoEmpty(folder))
        {
            String[] folders = folder.split("_");
            for (int i = 0; i < folders.length; i++)
            {
                dir += folders[i] + "/";
            }
        }
        if (VgStringUtil.isEmpty(dir))
        {
            dir = "other/";
        }

        dir = extendFilePrefix(dir);

        long expireTime = 60;

        long currentTimeMillis = System.currentTimeMillis();
        long expireEndTime = currentTimeMillis + expireTime * 1000;
        Date expiration = new Date(expireEndTime);
        PolicyConditions policyConds = new PolicyConditions();
        policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
        policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

        String postPolicy = client.generatePostPolicy(expiration, policyConds);
        byte[] binaryData = new byte[0];
        try
        {
            binaryData = postPolicy.getBytes("utf-8");
        }
        catch (UnsupportedEncodingException ex)
        {
            return Result.error(ResultCode.NOT_FOUND);
        }
        String encodedPolicy = BinaryUtil.toBase64String(binaryData);
        String postSignature = client.calculatePostSignature(postPolicy);

        if (VgStringUtil.isEmpty(fileName))
        {
            return Result.error("文件名不能为空");
        }

        int lastIndex = fileName.lastIndexOf(".");
        String filePostfix = fileName.substring(lastIndex, fileName.length());

        Map<String, String> respMap = new LinkedHashMap<String, String>();
        //OSSAccessKeyId
        respMap.put("accessId", AliYunParameter.accessKeyId);
        respMap.put("policy", encodedPolicy);
        respMap.put("signature", postSignature);
        respMap.put("dir", dir);
        respMap.put("host", AliYunParameter.ossHost);
        respMap.put("path", dir + VgStringUtil.genShortUuid() + "_" + currentTimeMillis + filePostfix);

        respMap.put("expire", String.valueOf(expireEndTime / 1000));

        return Result.ok(respMap);
    }

    private String extendFilePrefix(String fileStr)
    {
        //不同的环境上传到不同的目录
        ProfileActive profileActive = SysParameter.profileActive;
        //生产环境
        if (profileActive.isProd())
        {
            fileStr = profileActive.type() + "/" + fileStr;
        }//测试环境
        else if (profileActive.isTest())
        {
            fileStr = profileActive.type() + "/" + fileStr;
        }//开发环境
        else if (profileActive.isDev())
        {
            fileStr = profileActive.type() + "/" + fileStr;
        }

        return fileStr;
    }
}

package com.vg.data.enums;

import com.vg.util.VgStringUtil;

public enum ProfileActive
{
    UNKNOWN("UNKNOWN", "未知"),
    DEV("dev", "开发"),
    TEST("test", "测试"),
    PROD("prod", "生产"),
    ;

    String type;
    String desc;

    ProfileActive(String type, String desc)
    {
        this.type = type;
        this.desc = desc;
    }

    public String type()
    {
        return type;
    }

    public static ProfileActive parseTo(String type)
    {
        ProfileActive pt = ProfileActive.UNKNOWN;
        if (VgStringUtil.isEmpty(type))
        {
            return pt;
        }

        if (type.equals(ProfileActive.DEV.type))
        {
            pt = ProfileActive.DEV;
        }
        else if (type.equals(ProfileActive.TEST.type))
        {
            pt = ProfileActive.TEST;
        }
        else if (type.equals(ProfileActive.PROD.type))
        {
            pt = ProfileActive.PROD;
        }

        return pt;
    }

    public static String getDesc(String type)
    {
        if (VgStringUtil.isEmpty(type))
        {
            return null;
        }

        for (ProfileActive mt : ProfileActive.values())
        {
            if (mt.type.equals(type))
            {
                return mt.desc;
            }
        }

        return null;
    }

    public boolean isProd()
    {
        return (this.type.equals(ProfileActive.PROD.type));
    }

    public boolean isTest()
    {
        return (this.type.equals(ProfileActive.TEST.type));
    }

    public boolean isDev()
    {
        return (this.type.equals(ProfileActive.DEV.type));
    }
}

需要引入阿里云maven包：

        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-ocr</artifactId>
            <version>1.0.8</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>viapi-utils</artifactId>
            <version>1.0.0</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-viapiutils</artifactId>
            <version>1.0.0</version>
        </dependency>

转载：码书网码书网，Ma Shu，一个专门面向计算机技术相关的软硬件人（俗称码农）与邀约注册软硬件专家（俗称码咖）之间的编程社交网站。https://www.mashuwang.com.cn/essay/detail/gPXQf0yZ.html?wsos=1