微信小程序实现发布新闻（上传图片、拷贝图片到服务器上面、预览图片）

我的qq 2038373094我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会做过律师在线咨询系统、共享农场手机app、在线心理咨询系统效果图如下wxml文件(这个文件里包含了把图片上传到后台服务器，我的后台是java；预览图片)<view><view c...

qq_37591637

2949人浏览 · 2019-05-24 11:44:00

qq_37591637 · 2019-05-24 11:44:00 发布

我的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, // 默认9
      sizeType: ["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 cn.com.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 cn.com.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;
	}
	@Transactional
	public String copyfile(){
		//url
		String 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 block
					e.printStackTrace();
				}
			} catch (FileNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}finally{
				try {
					if(in!=null){
						in.close();
					}
					if(fout!=null){
						fout.close();
					}
					
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.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 block
					e.printStackTrace();
				}
		return null;
	}
}

2、存储表单数据

package cn.com.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 cn.com.bean.News;
@Repository(value = "pushNews")
@Scope("prototype")
public class PushNews implements ModelDriven<News> {
	@Autowired
	private SessionFactory sf;
	@Autowired
	private News news;

	@Transactional
	public 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;
	}

	@Override
	public News getModel() {
		// TODO Auto-generated method stub
		return news;
	}
}

数据库表如下

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

qq_37591637

@qq_37591637

已为社区贡献58条内容