> 위챗 애플릿 > 미니 프로그램 개발 > 사진을 서버에 업로드하는 WeChat 애플릿 코드 정보

사진을 서버에 업로드하는 WeChat 애플릿 코드 정보

不言
풀어 주다: 2018-06-23 11:06:38
원래의
3304명이 탐색했습니다.

이 기사에서는 주로 사진을 서버에 업로드하는 WeChat 애플릿의 예제 코드를 소개합니다. 기사에서는 하나 이상의 사진을 업로드하는 WeChat 애플릿도 소개합니다. 이 기사에서는 모든 사람에게 방법을 자세히 소개하며, 필요한 친구는

를 참조할 수 있습니다. 서버에 사진 업로드:

1 먼저 프런트 엔드에 사진을 선택할 수 있는 영역을 작성합니다. wx를 실행하려면 이미지 인터페이스를 선택하고 wx.setStorage 인터페이스를 사용하여 이미지 경로를 저장하세요.

사진을 서버에 업로드하는 WeChat 애플릿 코드 정보

-wxml
 <view class="shangchuan" bindtap="choose">
  <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image>
 </view>
 <button formType=&#39;submit&#39; class="fabu">发布项目</button>
 /**选择图片 */
 choose: function () {
  var that = this
  wx.chooseImage({
   count: 1,
   sizeType: [&#39;original&#39;, &#39;compressed&#39;], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: [&#39;album&#39;, &#39;camera&#39;], // 可以指定来源是相册还是相机,默认二者都有
   success: function (res) {
    var tempFilePaths = res.tempFilePaths
    that.setData({
     tempFilePaths: res.tempFilePaths
    })
    console.log(res.tempFilePaths)
    wx.setStorage({ key: "card", data: tempFilePaths[0] })
   }
  })
 },
로그인 후 복사

2. wx.uploadFile을 사용하여 방금 업로드한 이미지를 서버에 업로드하세요

 formSubmit2: function (e) {
    var that = this
    var card = wx.getStorageSync(&#39;card&#39;)
    wx.uploadFile({
     url: app.globalData.create_funds,
     filePath: card,
     name: &#39;card&#39;,
     formData: {
      &#39;user_id&#39;: app.globalData.user_id,
      &#39;person&#39;: e.detail.value.person,
      &#39;company&#39;: e.detail.value.company,
     },
     success: function (res) {
      console.log(res)
     }
    })
   }
  }
 },
로그인 후 복사

PS: WeChat 애플릿은 하나 이상의 이미지를 업로드합니다

1 .핵심

1. 사진 선택

wx.chooseImage({
   sizeType: [], // original 原图,compressed 压缩图,默认二者都有
   sourceType: [], // album 从相册选图,camera 使用相机,默认二者都有
   success: function (res) {
    console.log(res);
    var array = res.tempFilePaths, //图片的本地文件路径列表
   }
  })
로그인 후 복사

2. 사진 업로드

wx.uploadFile({
   url: &#39;&#39;, //开发者服务器的 url
   filePath: &#39;&#39;, // 要上传文件资源的路径 String类型!!!
   name: &#39;uploadFile&#39;, // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
   header: {
    &#39;content-type&#39;: &#39;multipart/form-data&#39;
   }, // 设置请求的 header
   formData: { }, // HTTP 请求中其他额外的参数
   success: function (res) {
   },
   fail: function (res) {
   }
  })
로그인 후 복사

// 点击上传图片
upShopLogo: function () {
  var that = this;
  wx.showActionSheet({
   itemList: [&#39;从相册中选择&#39;, &#39;拍照&#39;],
   itemColor: "#f7982a",
   success: function (res) {
    if (!res.cancel) {
     if (res.tapIndex == 0) {
      that.chooseWxImageShop(&#39;album&#39;)  
     } else if (res.tapIndex == 1) {
      that.chooseWxImageShop(&#39;camera&#39;)
     }
    }
   }
  })
 },
 chooseWxImageShop: function (type) {
  var that = this;
  wx.chooseImage({
   sizeType: [&#39;original&#39;, &#39;compressed&#39;],
   sourceType: [type],
   success: function (res) {
/*上传单张
    that.data.orderDetail.shopImage = res.tempFilePaths[0],
    that.upload_file(API_URL + &#39;shop/shopIcon&#39;, res.tempFilePaths[0])
*/
 /*上传多张(遍历数组,一次传一张)
    for (var index in res.tempFilePaths) {
       that.upload_file(API_URL + &#39;shop/shopImage&#39;, res.tempFilePaths[index])
    }
*/
   }
  })
 },
upload_file: function (url, filePath) {
  var that = this;
  wx.uploadFile({
   url: url,
   filePath: filePath,
   name: &#39;uploadFile&#39;,
   header: {
    &#39;content-type&#39;: &#39;multipart/form-data&#39;
   }, // 设置请求的 header
   formData: { &#39;shopId&#39;: wx.getStorageSync(&#39;shopId&#39;) }, // HTTP 请求中其他额外的 form data
   success: function (res) {
    wx.showToast({
       title: "图片修改成功",
       icon: &#39;success&#39;,
       duration: 700
      })
   },
   fail: function (res) {
   }
  })
 },
로그인 후 복사

이상 이것이 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 추천

WeChat 애플릿은 버튼을 클릭하여 글꼴 색상을 변경하는 기능을 구현합니다


WeChat 애플릿은 현재 위치, 경도, 위도를 가져와 지도를 표시합니다


WeChat 애플릿 여러 파일을 다운로드할 수 있는 간단한 패키지입니다


위 내용은 사진을 서버에 업로드하는 WeChat 애플릿 코드 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿