内容简介:上传图片:前台选择图片并把临时地址上传后台,后台把图片上传至自己的服务器,以下是上传图片的方法,有后台是java的还有PHP的,如有疑问或不解,请留言。前端:wxml:<view class='quan' bindtap='addTeamImage' >+</view>//定义添加图片的点击点。
上传图片:前台选择图片并把临时地址上传后台,后台把图片上传至自己的服务器,以下是上传图片的方法,有后台是 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两个版本》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 如何在Hibernate/JPA中配置具有两个连接池的两个数据源
- 如何合并两个 TensorFlow 模型
- 关于sqlmap的两个小坑
- JS计算两个时间间隔
- 昨天 GitHub 挂了两个小时
- Openstack两个容易混淆的概念
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Objective-C编程
[美] Aaron Hillegass / 夏伟频、李骏 / 华中科技大学出版社 / 2012-9-25 / 58.00元
《Objective-C编程》讲述Objective-C编程语言和基本的iOS/Mac开发知识。作者首先从基本的编程概念讲起(变量、条件语句、循环结构等),接着用浅显易懂的语言讲解Objective-C和Foundation的知识,包括Objective-C的基本语法、 Foundation常用类 、内存管理、常用设计模式等,最后手把手教读者编写完整的、基于事件驱动的iOS/Mac应用。作者还穿插......一起来看看 《Objective-C编程》 这本书的介绍吧!