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

喜欢ヅ旅行 2022-01-28 16:25 482阅读 0赞

### 我的qq 2038373094 ###

我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会

做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

### ***效果图如下*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

### ***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;
    	}
    }

### ***数据库表如下*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220128/4fa19491d70a4ac684ac5ca4b378e31f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220128/b1ad62e41ac3445c8ec864952db04ea1.png