Heim > WeChat-Applet > Mini-Programmentwicklung > So laden Sie Bilder im WeChat-Miniprogramm hoch (Codebeispiel)

So laden Sie Bilder im WeChat-Miniprogramm hoch (Codebeispiel)

不言
Freigeben: 2018-08-29 15:36:50
Original
13304 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem Hochladen von Bildern (Codebeispielen) im WeChat-Applet. Ich hoffe, dass er für Sie hilfreich ist.

1. WXML-Datei

<text>上传图片</text>
<view>

<button bindtap="uploadimg">点击选择上传图</button>

</view>
<image src=&#39;{{source}}&#39; style=&#39;width:600rpx; height:600rpx&#39; />
Nach dem Login kopieren

2. js-Datei

Page({

  /**
   * 页面的初始数据
   */
  data: {
  //初始化为空
    source:&#39;&#39;
  },

/**
 * 上传图片
 */
  uploadimg:function(){
    var that = this;
    wx.chooseImage({  //从本地相册选择图片或使用相机拍照
      count: 1, // 默认9
      sizeType: [&#39;original&#39;, &#39;compressed&#39;], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: [&#39;album&#39;, &#39;camera&#39;], // 可以指定来源是相册还是相机,默认二者都有

      success:function(res){
        //console.log(res)
       //前台显示
        that.setData({
          source: res.tempFilePaths
        })

        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
         wx.uploadFile({
          url: &#39;http://www.website.com/home/api/uploadimg&#39;,
          filePath: tempFilePaths[0],
          name: &#39;file&#39;,
         
          success:function(res){
            //打印
            console.log(res.data)
          }
        })
       
      }
    })
  },
)}
Nach dem Login kopieren

Run-Ergebnis:


Konsolendruckergebnis:

Zu diesem Zeitpunkt ist der Upload erfolgreich!

Verwandte Empfehlungen:

Wie lade ich Bilder in der WeChat-Entwicklung hoch?


So laden Sie Bilder über das WeChat-Applet auf den Server hoch

Das obige ist der detaillierte Inhalt vonSo laden Sie Bilder im WeChat-Miniprogramm hoch (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage