我的qq 2038373094
我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会
做过律师在线咨询系统、共享农场手机app、在线心理咨询系统
效果图如下
wxml文件
(这个文件里包含了把图片上传到后台服务器，我的后台是java；预览图片)
<view><view class="frm"><view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;"><view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;"><view class="ui-col-content align-center valign-middle">新闻标题</view></view><view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;"><view class="ui-col-content align-center valign-middle"><input name="input" placeholder="请输入新闻标题" bindinput="gettitle"></input></view></view></view><view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;"><view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;"><view class="ui-col-content align-center valign-middle">新闻内容</view></view><view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;"><view class="ui-col-content align-center valign-middle"><textarea placeholder="请输入新闻内容" name="textarea" bindinput="getcontent" class="cnt"></textarea></view></view></view><view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:60px;"><view class="ui-col ui-col-2 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 16.666666666666664%;"><view class="ui-col-content align-center valign-middle">类型</view></view><view class="ui-col ui-col-10 ui-col-align-center align-center valign-middle" style="flex: 0 0 83.33333333333334%;"><view class="ui-col-content align-center valign-middle"><radio-group class="radio-group" bindchange="radioChange"><label class="radio" wx:for="{{items}}" wx:key="item"><radio value="{{item.name}}" checked="{{item.checked}}" color="#39f">{{item.value}}</radio></label></radio-group></view></view></view><view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;"><view class="ui-col ui-col-6 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 50%;"><view class="ui-col-content align-center valign-middle"><button style="margin:30rpx;" bindtap="chooseimage">上传图片</button></view></view><view class="ui-col ui-col-6 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 50%;"><view class="ui-col-content align-center valign-middle"><image src="{{tempFilePaths}}" style="width:300rpx; height: 400rpx" /></view></view></view><view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;"><view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;"><view class="ui-col-content align-center valign-middle"><button type="primary" bindtap="pushnews">发布新闻</button></view></view></view></view></view>
wxss代码
.cnt {width: 100%;height: 400rpx;}
js代码
"use strict";//index.js//获取应用实例var app = getApp();Page({radioChange: function radioChange(e) {this.setData({ kinds: e.detail.value });console.log("radio发生change事件，携带value值为：", e.detail.value);},gettitle: function gettitle(e) {this.setData({ title: e.detail.value });},getcontent: function getcontent(e) {this.setData({ content: e.detail.value });},data: {items: [{ name: "教育", value: "教育" }, { name: "成长", value: "成长", checked: "true" }, { name: "心理", value: "心理" }, { name: "课程", value: "课程" }],tempFilePaths: "",title: "",content: "",kinds: ""},pushnews: function pushnews() {var that = this;//发布新闻wx.request({url: "http://localhost:8080/Teacher/pushNews.action", //接口地址data: {title: that.data.title,content: that.data.content,img: that.data.tempFilePaths,kinds: that.data.kinds},method: "get",header: {"content-type": "application/json"},success: function success(res) {//页面跳转wx.navigateTo({url: "./../tlogin/tlogin"});//页面跳转}});},onLoad: function onLoad() {},chooseimage: function chooseimage() {var _this = this;var imgpath = "";wx.chooseImage({count: 1, // 默认9sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有success: function success(res) {wx.showToast({title: "正在上传...",icon: "loading",mask: true,duration: 1000});// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片imgpath = res.tempFilePaths;//上传wx.uploadFile({url: "http://localhost:8080/Teacher/copyfile.action",filePath: imgpath[0],name: "file",header: { "Content-Type": "multipart/form-data" },success: function success(res) {console.log(res);if (res.statusCode != 200) {wx.showModal({title: "提示",content: "上传失败",showCancel: false});return;}var data = res.data;console.log("新的路径:" + data);_this.setData({//上传成功修改显示头像tempFilePaths: data});},fail: function fail(e) {console.log(e);wx.showModal({title: "提示",content: "上传失败",showCancel: false});},complete: function complete() {wx.hideToast();//隐藏Toast}});//上传}});}});
后台是java语言，采用ssh框架做的
1、拷贝图片并且返回图片的路径给前端
package .service;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts2.ServletActionContext;import org.springframework.context.annotation.Scope;import org.springframework.stereotype.Repository;import org.springframework.transaction.annotation.Transactional;import .tools.RandomStr;@Repository(value="saveImg")@Scope("prototype")public class SaveImg {private File file;public File getFile() {return file;}public void setFile(File file) {this.file = file;}@Transactionalpublic String copyfile(){//urlString url = "http://localhost:8080/Teacher/news/";String fn=RandomStr.getRandomString(10);//文件的拷贝//存储图片的地址HttpServletRequest request = ServletActionContext.getRequest();String dsk=request.getSession().getServletContext().getRealPath("/news");String cfn=dsk+"/"+fn+".jpg";File fl=new File(cfn);FileOutputStream fout=null;InputStream in=null;try {fout=new FileOutputStream(fl);in=new FileInputStream(file);byte [] by=new byte[1024];int length=0;try {while((length=in.read(by))>-1){fout.write(by, 0, length);}url=url+fn+".jpg";} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{try {if(in!=null){in.close();}if(fout!=null){fout.close();}} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} }//把地址HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("utf-8");System.out.println(url);try {response.getWriter().write(url);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return null;}}
2、存储表单数据
package .service;import java.text.SimpleDateFormat;import java.util.Date;import org.hibernate.Session;import org.hibernate.SessionFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.context.annotation.Scope;import org.springframework.stereotype.Repository;import org.springframework.transaction.annotation.Transactional;import com.opensymphony.xwork2.ModelDriven;import .bean.News;@Repository(value = "pushNews")@Scope("prototype")public class PushNews implements ModelDriven<News> {@Autowiredprivate SessionFactory sf;@Autowiredprivate News news;@Transactionalpublic String copyfile() {Session session = sf.getCurrentSession();//获取当前时间Date d=new Date();SimpleDateFormat sim=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");String data=sim.format(d);news.setTime(data);session.save(news);return null;}@Overridepublic News getModel() {// TODO Auto-generated method stubreturn news;}}
