小程序图片上传 wx.uploadFile 后台java PHP两个版本

逻辑薄雾
• 阅读 6390

上传图片:前台选择图片并把临时地址上传后台,后台把图片上传至自己的服务器,以下是上传图片的方法,有后台是java的还有PHP的,如有疑问或不解,请留言。

前端:

wxml:<view class='quan' bindtap='addTeamImage' >+</view>//定义添加图片的点击点。

js:

addTeamImage: function () {      //对应wxml的点击事件

var that = this;

wx.chooseImage({    //选择图片

count: 1,

success: function (res) {    //选择图片成功

var tempFilePaths = res.tempFilePaths; //图片临时地址

that.setData({defaultHead: tempFilePaths[0]  });

wx.uploadFile({     //上传图片

url: saveRunteamImgUrl,    //后台上传图片的方法地址

filePath: tempFilePaths[0],    //上传图片的临时地址

name: 'file',      //文件格式 

success: function (res) {    //上传成功

let obj = JSON.parse(res.data)      //返回值是json格式转化成object

that.setData({

teamHeadUrl: obj.data     //将返回的图片服务器地址保存在变量中

})

if (obj.data == "error") {     //后台的上传方法出现问题

wx.showToast({ title: '图片上传失败,请重试!', icon: 'none', duration: 2000 })

that.setData({ teamHeadUrl: '' })

}},

})},

fail: function (res) {     //图片上传失败

that.setData({ teamHeadUrl: '' })

}})},

java后台:

ImageController.java

package com.th.controller;
//引入文件
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.Map;

/**

  • Created by wanglimin on 2019/1/31.

*/

@RestController
@RequestMapping("/image")
public class ImageController extends BaseController { //声明上传图片类文件

@ResponseBody
@RequestMapping(value = "/uploadImage", method = RequestMethod.POST,produces = "application/json")
public Map<String,Object> uploadImage(HttpServletRequest request) throws IOException {
    MultipartHttpServletRequest req =(MultipartHttpServletRequest)request;
    MultipartFile multipartFile =  req.getFile("file");

    String realPath = "https://www.***.com/image";//服务器存放图片地址
        try {
        File dir = new File(realPath);
        if (!dir.exists()) {
            dir.mkdir();
        }
        String newPath = System.currentTimeMillis()+""+(int)(1+Math.random()*(10000-1+1))+".jpg";//图片名称是毫秒数加1-10000的随机数
        File file  =  new File(realPath,newPath);
        multipartFile.transferTo(file);
        return rtnParam(0,file.getPath());    // 返回图片上传到服务器上的地址
    } catch (IOException e) {
        e.printStackTrace();
    } catch (IllegalStateException e) {
        e.printStackTrace();
    }

    return rtnParam(0,"error");     //方法错误   rtnParam是继承base类中的方法
}

}

BaseController.java

public class BaseController {

private Map<String, Object> errorCodeMap;

protected Map<String, Object> rtnParam(Integer errorCode, Object data) {
    errorCodeMap = new HashMap<String, Object>();
    errorCodeMap.put("errorCode", errorCode);
    errorCodeMap.put("data", data);
    return errorCodeMap;
}

}

PHP后台

<?php
namespace ApiController;
use ThinkUpload;
use ThinkPage;
use ThinkController;
/**
 *
 * 客户端接口唯一入口
 * @author Administrator
 *
 */
class DefaultPostController extends Controller {   //注:前台的上传图片连接后台地址改:'https://*.com/api/defaultPost'’
    public function index(){
        if(IS_POST){
            $obj = new ThinkUpload();// 实例化上传类
            $obj->maxSize = 2048000 ;// 设置附件上传大小
            $obj->savePath ='/runteam/'; // 设置附件上传目录
            $obj->exts =  array('jpg','jpeg','gif','png');// 设置附件上传类型
            $obj->saveName = array('uniqid','');//文件名规则
            $obj->replace = true;//存在同名文件覆盖
            $obj->autoSub = false;//使用子目录保存
            // 上传文件 gb
            $info =  $obj->upload();
            $file = $info['file'];
            $return = $file['savepath'].$file['savename'];
            
            header('Content-Type:application/json; charset=utf-8');
            exit(json_encode($return));  //返回服务器图片地址
        }
    }

}
获取更多文章,请关注公众号。
小程序图片上传 wx.uploadFile   后台java   PHP两个版本

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
ThinkPHP V5.0 图片上传base64
/单图上传@returnbool|mixed|string/protectedfunctionuploadingqrcode($images'',$name'')if(empty($images))$thisresult($images,0,'图片错误');if(pregmatch('/^(data:\simag
Wesley13 Wesley13
3年前
PHP实现图片(文件)上传
这几天整理做过的php项目,感觉这个经常会用到,传上来共享一下咯首先,前端界面1、表单的首行需要加上enctype"multipart/formdata",需要上传的图片必须设置type"file"表示选择文件<formid"img_form"method"post"class"formhorizontal"r
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
3年前
Jmagic与 ImageMagick linux下安装与使用
  公司现在用的是java开发,后台难免会用到图片上传,自动生成缩略图,然后不可避免的要安装一些比较好的软件,我们公司使用的是ImageMagick,一个图片处理程序,就是说我们可以通过程序来进行图片的处理,格式化转换,加水印,生成缩略图等。但是!这只是一个软件,当我们安装完这个软件的时候我们只能通过命令来进行图片转换   比如convert
Stella981 Stella981
3年前
Fastdfs安装_nginx进行图片动态压缩
说明1.因为上传的图片较大,部分页面直接引用图片地址,则造成页面加载缓慢问题。2.考虑到服务器空间问题,我们没有进行上传缩略图。仅仅是上传了原图3.为了优化页面加载图片的时间问题,所以对图片进行动态缩放。PS:如果访问量较高,建议进行存储缩略图图片缩放采用nginx的http\_image\_filter\_module
Stella981 Stella981
3年前
HTML5 file API加canvas实现图片前端JS压缩并上传
一、图片上传前端压缩的现实意义对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验。这种体验包括两方面:1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险。2.最最重要的体验改进点:省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进
Stella981 Stella981
3年前
Javascript验证上传图片大小[前台处理]
需求分析:在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:1)后台处理:也就是AJAXPOST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理。2)前台处理:也就是利用Javascript获取该图片大小。显然第一种方式,很不好。因为需要把文件先上传到
Immerse Immerse
6个月前
我悟了!原来本地图片预览还能这样搞
在网页开发中,经常会遇到需要让用户上传图片并在上传前进行预览的需求。这样做的好处显而易见:用户可以立即看到自己选择的图片是否正确,避免了不必要的上传和服务器资源浪费,提升了用户体验。