小程序图片上传-wxuploadFile-后台java-PHP两个版本

jiezi

6 年前

上传图片：前台选择图片并把临时地址上传后台，后台把图片上传至自己的服务器，以下是上传图片的方法，有后台是 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)); // 返回服务器图片地址
       }
   }

}
获取更多文章，请关注公众号。