小程序模板網(wǎng)

微信小程序 tp5上傳圖片

發(fā)布時(shí)間:2018-05-02 15:57 所屬欄目:小程序開(kāi)發(fā)教程

test.wxml頁(yè)面

<view class="title">請(qǐng)選擇要反饋的問(wèn)題view>
<view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view>{{array[index]}}view>
  <image src='../../image/ic_down.svg' class='picker_icon'>image>
  picker>
view>
<textarea placeholder="請(qǐng)輸入您的意見(jiàn)或建議" name="textarea" bindinput="feedbackInput"/>
<view class="title">圖片添加view>
<view class='uploadImg'>
  <view wx:for="{{image}}" wx:key='feedbackImg'>
    <image src='{{image[index]}}'>image>
    <button bindtap='delectImg' data-num='{{index}}'>刪除button>
  view>
  <image src='../../image/ic_add_pic.svg' bindtap='uploadImg' class='addimg' style='display:{{img_button}}'>image>
view>
<button class="submit" type="{{button_status}}" bindtap="Submit"> 提交 button>

test.js頁(yè)面

var app = getApp();
Page({
  data: {
    array: ['程序錯(cuò)誤', '軟件改善', '業(yè)務(wù)建議'],
    index:0,
    msg:'',
    button_status: 'default',
    image:[],
    img_button:'inline-block',
  },
  bindPickerChange: function (e) {
    this.setData({ 
      index: e.detail.value 
    });
  },
  Submit: function (e) {
    if(this.data.msg.length != 0){
      var that=this;
      wx.showModal({
        title: '提示',
        content: '是否確認(rèn)提交?',
        success: function (res) {
          if (res.confirm) {
            wx.request({
              url: app.appUrl.url + 'advise/uid/' + app.appData.userid + '/type/' + that.data.array[that.data.index] + '/content/' + that.data.msg,//+pic=圖片地址1,圖片地址2,圖片地址3此處讀取圖片隱藏域的圖片地址,多張用逗號(hào)分隔
              header: {
                "Content-Type": "applciation/json"
              },
              method: "POST",
              success: function (res) { },
              fail: function (err) { },
              complete: function (res) {
                wx.showToast({
                  title: '提交成功',
                  image: '/image/right.png',
                  duration: 3000
                })
                setTimeout(function () {
                  wx.clearStorage()
                  wx.navigateBack({
                    delta: 1
                  })
                }, 2000);
              },
            })
          }
        },
      })
    }
  },
  feedbackInput: function (event) {
    console.log(event.detail.value.length);
    if (event.detail.value.length==0){
      this.setData({
        button_status: 'default',
      });  
    }
    else{
      this.setData({
        button_status: 'primary',
      });  
    }
    this.setData({
      msg: event.detail.value,
    });
  },
  uploadImg:function(){
    var that = this, image = this.data.image;
    if(this.data.image.length<3){
      wx.chooseImage({
        count: 1, // 默認(rèn)9
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
        sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有
        success: function (res) {
          wx.uploadFile({
            url: app.appUrl.url + 'upload',//這個(gè)方法就是后臺(tái)處理上傳的方法
            filePath: res.tempFilePaths[0], //獲取到上傳的圖片
            name: 'file',
            success: function (info) {
              console.log(info);//info.data就是上傳成功的圖片名稱 您可以在wxml里面搞一個(gè)隱藏域存儲(chǔ)起來(lái),在上面Submit提交里拼裝一塊提交出去
            }
          })
        },
        complete: function (res) {
          // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
          if (that.data.image.length==2){
            that.setData({
              img_button: 'none',
            })
          }
          image.push(res.tempFilePaths);
          that.setData({
            image: image,
          })
        }
      })
    }
  },
  delectImg:function(e){
    var image = this.data.image;
    image.splice(e.currentTarget.dataset.num,1);
    this.setData({
      image: image,
      img_button: 'inline-block',
    })
  },
})

thinkphp5接受處理

    //圖片上傳
    public function upload(){
        $file = request()->file('file');
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/images');
        if($info){
            echo $info->getSaveName();
            die();
        }else{
            echo $file->getError();
            die();
        }
    }




易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://m.u-renovate.com/wxmini/doc/course/24183.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×