微信公众号开发

微信小程序weui uploader的使用

本文主要是介绍微信小程序weui uploader的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

js

uplaodFile(files) {
    // 文件上传的函数,返回一个promise
    return new Promise((resolve, reject) => {
      let that = this
      var urls = []
      console.log('upload files', files)
      wx.uploadFile({
        filePath: files.tempFilePaths[0],
        name: 'hwpic',		//key-value的key的名字
        url: 'http://localhost:8080/index/photo', //后端的接口
        success(res) {
          console.log(res)
          var data = JSON.parse(res.data)
          if (data.status == 1) {
            urls.push(data.url)	//必须返回一个url
            that.setData({
              imgUrl: urls,
            })
            resolve({
              urls:urls
            });
          }
        }
      })
      setTimeout(() => {
        reject('some error')
      }, 1000)
    })
  },

html

 <!-- 图片上传内容 -->
    <view class="page__bd">
        <mp-cells>
            <mp-cell>
                <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="9" title="图片上传" tips="图片上传提示"></mp-uploader>
            </mp-cell>
        </mp-cells>
    </view>
</view>

json

{
  "usingComponents": {
   "mp-uploader": "../../components/uploader/uploader"
  }
  }
这篇关于微信小程序weui uploader的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!