Java微信小程序oss图片上传的实现方法

先将图片上传到服务器,再将服务器上的图片传入oss中

小程序js

 //启动上传等待中...
    wx.showToast({
     title: '正在上传...',
     icon: 'loading',
     mask: true,
     duration: 10000
    })
    //上传图片
    wx.uploadFile({
     url: '***********',//上传的路径(Java后台路径)
     filePath: tempFilePaths[0],
     name: 'file',
     success: function (res) {
      console.log(res.data)//oss图片路径
      wx.showToast({
       title: "上传成功",
       icon: 'success',
       duration: 1000
      })
     },
     fail: function ({ errMsg }) {
      wx.showToast({
       title: "上传失败",
       duration: 1000
      })
     },
    })

Java后台

@RequestMapping("/programImg")
public @ResponseBody String programImg(@RequestParam(required = false) MultipartFile file,HttpServletRequest request) {
 File targetFile=null;
    String str="";//返回存储路径
    String fileName=file.getOriginalFilename();//获取文件名加后缀
    if(fileName!=null&&fileName!=""){
      String returnUrl = ”*****“;//服务器存储路径
      String fileF = FilenameUtils.getExtension(file.getOriginalFilename());//文件后缀
      fileName=”*****************“;//新的文件名
      //先判断文件是否存在,获取文件夹路径
      File file1 =new File(returnUrl);
      //如果文件夹不存在则创建
      if(!file1 .exists() && !file1 .isDirectory()){
        file1 .mkdir();
      }
      //将图片存入文件夹
      targetFile = new File(file1, fileName);
      try {
       //将上传的文件写到服务器上指定的文件。
       file.transferTo(targetFile);
        String gifName = "******";//图片oss上传根目录
        String url=gifName+"/"+fileName;
        putObject(targetFile, gifName,fileName);
        str=““;//oss图片路径
      } catch (Exception e) {
        e.printStackTrace();
      }
    }
    return str;
 }
public static void putObject(File file,String fileName,String fileName){
 OSSClient ossClient=null;
 try {
  //初始化oss
  ossClient = ossIni();
  //上传路径
  String route=fileName+"/"+fileName;
  //上传图片 img-program--Bucket名称
  ossClient.putObject("img-program",route,file);
 } catch (Exception e) {
  if (ossClient!=null) {
  ossClient.shutdown();
  }
  e.printStackTrace();
 }
 ossClient.shutdown();
 }
private static OSSClient ossIni(){
 OSSClient ossClient = null;
 try {
  ossClient = new OSSClient(ENDPOINT,KEY_ID,KEY_SECRET);
  System.out.println("oss 初始化成功");
 } catch (Exception e) {
  e.printStackTrace();
 }
 return ossClient;
}
public static final String ENDPOINT="****************";
public static final String KEY_ID="*****************";
public static final String KEY_SECRET="****************";

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

  • 微信小程序实现图片上传、删除和预览功能的方法

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i

  • tp5实现微信小程序多图片上传到服务器功能

    最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: <!--选择图片 --> <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <im

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • 微信小程序 图片上传实例详解

    一.了解wx.chooseImage(OBJECT) 二.代码编程 在pages文件里面创建uploadimg文件夹 1.编写页面结构:uploadimg.wxml <view class="container" style="padding:1rem;"> <button type="primary"bindtap="chooseimage">获取图片</button> <image

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

    本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下 前端:微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bindChooiceProduct: function () { var that = this; wx.chooseImage({ count: 3, //最多可以选择的图片总数 sizeType: ['compress

  • 小程序云开发如何实现图片上传及发表文字

    微信给了我们存储空间以及图片上传的功能,我们怎么可以轻易放过呢? 先看看界面: 二话不说, 先实现界面: <!--pages/pulish/pulish.wxml--> <view class='flexDownC'> <view class='flexDownC w100'> <textarea class='input' bindinput='textInput' placeholder-style='margin-left:20rpx;' maxlength

  • 微信小程序实现图片上传

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下/p> 图片上传服务器: wxml <view class="container"> <button bindtap='chooseImageTap'>上传图片</button> </view> wxss Page({ /** * 页面的初始数据 */ data: { imgs: [],//本地图片地址数组 picPaths:[],//网络路径 },

  • 微信小程序实现图片上传功能实例(前端+PHP后端)

    前言 几乎每个程序都需要用到图片.下面就来给大家介绍前端+PHP后端实现微信小程序实现图片上传功能,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style=

  • 微信小程序多张图片上传功能

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',

随机推荐