亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

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

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

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武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
亚洲人成在线观| 国产午夜精品美女视频明星a级| 国产精品久久久久久久久影视| 国产精品国产三级国产专播精品人| 欧美激情视频在线观看| 77777少妇光屁股久久一区| 久久久久久亚洲| 欧美黑人一级爽快片淫片高清| 2019av中文字幕| 在线成人一区二区| 日韩欧美中文在线| 国产精品成人在线| 欧美激情影音先锋| 亚洲欧美日韩综合| 日韩免费电影在线观看| 在线播放日韩精品| 亚洲二区中文字幕| 美日韩在线视频| 国产美女精品视频免费观看| 亚洲美女av在线播放| 亚洲欧美日韩中文视频| 亚洲精品自产拍| 久久久久久免费精品| 九九精品在线观看| 欧洲永久精品大片ww免费漫画| 久久综合网hezyo| 九九热这里只有精品免费看| 欧美精品日韩三级| 国产欧美日韩亚洲精品| 中文在线资源观看视频网站免费不卡| 亚洲欧美日韩直播| 国产精品视频男人的天堂| 欧美激情乱人伦| 日韩中文娱乐网| 亚洲欧美日韩天堂一区二区| 日韩成人在线免费观看| 北条麻妃99精品青青久久| 亚洲精品一区二区在线| 亚洲性日韩精品一区二区| 韩剧1988在线观看免费完整版| 久久精品久久久久久国产 免费| 欧美日韩国产页| 国产精品久久久久999| 亚洲美腿欧美激情另类| 国产午夜精品一区理论片飘花| 亚洲影视九九影院在线观看| 国产成人精品免费久久久久| 亚洲综合精品伊人久久| 美女黄色丝袜一区| 成人女保姆的销魂服务| 日韩精品日韩在线观看| 成人网址在线观看| 久久国产精品久久久久| 欧美黑人性猛交| 欧美午夜激情视频| 国产精品一区二区三区在线播放| 国产精品国产三级国产aⅴ9色| 亚洲第一网中文字幕| 麻豆成人在线看| 日本一欧美一欧美一亚洲视频| 日韩在线观看免费高清完整版| www.久久草.com| 日韩免费看的电影电视剧大全| 日韩电影免费观看在线| 久久久999精品| 国产午夜精品免费一区二区三区| 久久伊人91精品综合网站| 欧美网站在线观看| 欧美成人精品一区二区三区| 亚洲男子天堂网| 国产一区二区久久精品| 韩剧1988在线观看免费完整版| 国产噜噜噜噜久久久久久久久| 国产精品成人品| 亚洲一区二区自拍| 亚洲老头老太hd| 国产日韩中文字幕在线| 日韩av中文字幕在线播放| 欧美亚洲午夜视频在线观看| 欧美成人在线网站| 欧美大片在线看免费观看| 日本欧美中文字幕| 亚洲天堂免费观看| 久久久久久久久91| 91国产精品电影| 欧美大片免费观看在线观看网站推荐| 亚洲品质视频自拍网| 日本视频久久久| 91av国产在线| 久久久久久久网站| 国产精品日日摸夜夜添夜夜av| 成人福利视频网| 福利微拍一区二区| 久久久精品国产亚洲| 91精品久久久久久久久久另类| 九九视频这里只有精品| 亚洲在线www| 一区二区三区国产在线观看| 成人久久18免费网站图片| 国外成人在线视频| 欧美成人精品在线观看| 97超视频免费观看| 久久亚洲综合国产精品99麻豆精品福利| 日韩在线播放av| 97在线观看视频| 日韩在线精品视频| 亚洲字幕一区二区| 亚洲第一页在线| 国产免费成人av| 成人中文字幕+乱码+中文字幕| 国产精品成人免费电影| 久久精品国产久精国产一老狼| 秋霞av国产精品一区| 亚洲xxx自由成熟| 中文字幕在线看视频国产欧美在线看完整| 欧美大片欧美激情性色a∨久久| 欧美激情视频给我| 中文字幕欧美精品日韩中文字幕| 久久久女女女女999久久| 国产亚洲精品久久| 91tv亚洲精品香蕉国产一区7ujn| 国产精品大片wwwwww| 国产偷国产偷亚洲清高网站| 久久久久中文字幕2018| 热99精品只有里视频精品| 性欧美激情精品| 亚洲精品中文字幕有码专区| www.美女亚洲精品| 国产欧美在线观看| 国产香蕉一区二区三区在线视频| 国产一区二区在线免费视频| 亚洲区bt下载| 亚洲日本中文字幕免费在线不卡| 91久久久久久久久| 欧美中文字幕在线播放| 欧美在线一区二区视频| 国产综合在线看| 欧美成人午夜影院| 欧美一级视频在线观看| 韩国日本不卡在线| 亚洲网站在线观看| 亚洲色图av在线| 88xx成人精品| 亚洲国产成人爱av在线播放| 精品视频偷偷看在线观看| 国产精品久久久精品| 国产成人免费av| 久久激情视频久久| 亚洲日韩中文字幕在线播放| 欧美国产乱视频| 欧美电影在线观看网站| 国产亚洲精品久久久久久牛牛| 欧美日韩视频在线| 美女黄色丝袜一区| 国产成人aa精品一区在线播放| 亚洲91精品在线观看| 91精品久久久久久久久久久久久久| 日韩在线欧美在线国产在线| 日韩成人激情视频| 日韩免费精品视频| 国产精品久久久久久久久久新婚| 亚洲精品网站在线播放gif| 亚洲一区二区三区四区在线播放| 欧美一区第一页|