麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

微信小程序實現上傳圖片功能

2020-03-21 16:17:24
字體:
來源:轉載
供稿:網友

微信小程序圖片上傳,供大家參考,具體內容如下

先來看一下微信小程序的api

微信小程序,上傳圖片,小程序開發

來看一下頁面效果

微信小程序,上傳圖片,小程序開發

微信小程序,上傳圖片,小程序開發

微信小程序,上傳圖片,小程序開發

查看大圖

微信小程序,上傳圖片,小程序開發

wxml文件代碼:

<view class="weui-cell">     <view class="weui-cell__bd">      <view class="weui-uploader">       <view class="weui-uploader__hd">        <view class="weui-uploader__title">營業執照</view>        <view class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</view>       </view>       <view class="weui-uploader__bd">        <view class="weui-uploader__files">         <block wx:for="{{imageList}}" wx:for-item="image">          <view class="weui-uploader__file">           <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>          </view>         </block>        </view>        <view class="weui-uploader__input-box">         <view class="weui-uploader__input" bindtap="chooseImage"></view>        </view>       </view>      </view>   </view> </view> 

js文件代碼

chooseImage: function () {   var that = this;   console.log('aaaaaaaaaaaaaaaaaaaa')     wx.chooseImage({    count: this.data.count[this.data.countIndex],    success: function (res) {     console.log('ssssssssssssssssssssssssss')     //緩存下     wx.showToast({      title: '正在上傳...',      icon: 'loading',      mask: true,      duration: 2000,      success: function (ress) {       console.log('成功加載動畫');      }     })      console.log(res)     that.setData({      imageList: res.tempFilePaths     })     //獲取第一張圖片地址     var filep = res.tempFilePaths[0]     //向服務器端上傳圖片     // getApp().data.servsers,這是在app.js文件里定義的后端服務器地址     wx.uploadFile({      url: getApp().data.servsers + '/weixin/wx_upload.do',      filePath: filep,      name: 'file',      formData: {       'user': 'test'      },      success: function (res) {       console.log(res)       console.log(res.data)       var sss= JSON.parse(res.data)       var dizhi = sss.dizhi;       //輸出圖片地址       console.log(dizhi);       that.setData({        "dizhi": dizhi       })        //do something       }, fail: function (err) {       console.log(err)      }        });    }   })  },  previewImage: function (e) {   var current = e.target.dataset.src    wx.previewImage({     current: current,    urls: this.data.imageList   })  } 

java 后端代碼:

//獲取當前日期時間的string類型用于文件名防重復   public String dates(){      Date currentTime = new Date();      SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");      String dateString = formatter.format(currentTime);      return dateString;   }   @RequestMapping("wx_upload.do")   public void uploadPicture(HttpServletRequest request, HttpServletResponse response,PrintWriter writer) throws Exception {     System.out.println("進入get方法!");   //獲取從前臺傳過來得圖片     MultipartHttpServletRequest req =(MultipartHttpServletRequest)request;     MultipartFile multipartFile = req.getFile("file");   //獲取圖片的文件類型     String houzhu=multipartFile.getContentType();     int one = houzhu.lastIndexOf("/");     System.out.println(houzhu.substring((one+1),houzhu.length()));     System.out.println(multipartFile.getName());   //根據獲取到的文件類型截取出圖片后綴     String type=houzhu.substring((one+1),houzhu.length());     System.out.println(multipartFile.getContentType());      String filename;   // request.getRealPath獲取我們項目的根地址在加上我們要保存的地址     String realPath = request.getRealPath("/upload/wximg/");     try {       File dir = new File(realPath);       if (!dir.exists()) {         dir.mkdir();       }       //獲取到當前的日期時間用戶生成文件名防止文件名重復       String filedata=this.dates();     //生成一個隨機數來防止文件名重復       int x=(int)(Math.random()*1000);       filename="zhongshang"+x+filedata;       System.out.println(x);     將文件的地址和生成的文件名拼在一起       File file = new File(realPath,filename+"."+type);       multipartFile.transferTo(file);     //將圖片在項目中的地址和isok狀態儲存為json格式返回給前臺,由于公司項目中沒有fastjson只能用這個       JSONObject jsonObject=new JSONObject();       jsonObject.put("isok",1);       jsonObject.put("dizhi","/upload/wximg/"+filename+"."+type);        writer.write(jsonObject.toString());     } catch (IOException e) {       e.printStackTrace();     } catch (IllegalStateException e) {       e.printStackTrace();     } } 

來看一下之前在前端js輸出的內容:

微信小程序,上傳圖片,小程序開發

打開瀏覽器用我們的服務器的地址加上后臺返回json的dizhi字段去訪問這張圖片

微信小程序,上傳圖片,小程序開發

我們可以看到圖片已經填入我們的服務器端里了,然后在打開我們服務器端項目根地址下面的/upload/wximg

微信小程序,上傳圖片,小程序開發

到這里就大功告成了如果是多張圖片上傳可以在js里面根據要上傳的數量循環上傳。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 黄色免费小网站 | 悠悠成人资源亚洲一区二区 | 欧美一区二区三区中文字幕 | 黄色小视频免费在线观看 | 欧美亚洲国产一区二区三区 | 免费在线性爱视频 | 草妞视频| 一级α片免费看 | 神马视频我不卡 | 午夜视频在线 | 久久夜夜视频 | 亚洲精品一区二区三区免 | 视频一区二区三区中文字幕 | 麻豆传传媒久久久爱 | 久久久久久久久日本理论电影 | 欧美精品免费一区二区三区 | 成人午夜一区 | 婷婷中文字幕一区二区三区 | 中文字幕 亚洲一区 | 91美女福利视频 | 欧美精品激情在线 | 午夜视频大全 | 亚洲精品午夜国产va久久成人 | 国产成人综合在线观看 | 毛片网站视频 | 欧美视频国产精品 | 国产成人自拍av | 国产精品久久久久久久久久东京 | 久久精品片 | 日本中文一级片 | 久草在线看片 | 欧美18xxxx | 国产精品久久久久久婷婷天堂 | 国产精品99久久99久久久二 | 国产1区2区在线观看 | 成人三级黄色片 | 亚洲成人激情av | 欧美hdfree性xxxx| 91午夜视频| 国产精品免费视频观看 | 免费一级a毛片在线播放视 日日草夜夜操 |