摘要：上傳圖片前臺選擇圖片并把臨時地址上傳后臺，后臺把圖片上傳至自己的服務器，以下是上傳圖片的方法，有后臺是的還有的，如有疑問或不解，請留言。前端定義添加圖片的點擊點。
上傳圖片：前臺選擇圖片并把臨時地址上傳后臺，后臺把圖片上傳至自己的服務器，以下是上傳圖片的方法，有后臺是java的還有PHP的，如有疑問或不解，請留言。
前端：
wxml：+//定義添加圖片的點擊點。
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 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 errorCodeMap;
protected Map rtnParam(Integer errorCode, Object data) {
errorCodeMap = new HashMap();
errorCodeMap.put("errorCode", errorCode);
errorCodeMap.put("data", data);
return errorCodeMap;
}
}
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));? //返回服務器圖片地址
?? ??? ?}
?? ?}
}
獲取更多文章，請關注公眾號。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109441.html
