小程序模板網

微信小程序 tp5上傳圖片

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

test.wxml頁面

<view class="title">請選擇要反饋的問題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="請輸入您的意見或建議" 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頁面

var app = getApp();
Page({
  data: {
    array: ['程序錯誤', '軟件改善', '業(yè)務建議'],
    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: '是否確認提交?',
        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此處讀取圖片隱藏域的圖片地址,多張用逗號分隔
              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, // 默認9
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
        success: function (res) {
          wx.uploadFile({
            url: app.appUrl.url + 'upload',//這個方法就是后臺處理上傳的方法
            filePath: res.tempFilePaths[0], //獲取到上傳的圖片
            name: 'file',
            success: function (info) {
              console.log(info);//info.data就是上傳成功的圖片名稱 您可以在wxml里面搞一個隱藏域存儲起來,在上面Submit提交里拼裝一塊提交出去
            }
          })
        },
        complete: function (res) {
          // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的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+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24183.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢