小程序——实现图片文件的选择，展示及含有单个图片的表单上传（含php）

参考资料：
1.微信小程序开发-调用手机相机/相册功能 我在调用部分的思路和这个是相同的
2.实现点击按钮选择图片后显示图片并且可以预览该图片 这个有预览功能，我的项目没加
3.微信小程序上传图片到服务器实例代码 这篇文章虽然没有php但还是在上传部分给予了我很多思路
4.（PHP+MySQL）把图片上传到服务器指定位置，并且把图片路径插入到数据库中，最后读出图片（各种编码） 这篇文章是html的上传方式，而且图片以input形式引用，但也给了我一些帮助。
5.PHP 文件上传|菜鸟教程 菜鸟教程的代码简洁明了 也是html的上传方式，但是这里面的一句文件夹为777权限救了我
6.剖析小程序上传文件 将原理讲解的比较清晰
7.小程序的图片上传wx.uploadFile及后台PHP接收文件并存储到服务器 这个考虑的比较全面 给在php中创建了文件夹

在开发的过程中有时候需要上传图片文件，当然如果是以表单的形式就还会有其他的信息，这时候就不能再用普通的上传方式wx.request，而要用 wx.uploadFile的形式

一、效果图

二、图片的显示

先上代码：
xml：

<form bindsubmit="formSubmit" >
	 //此处只单一列举某一行值
      <view class="auth_4">
        <text >姓名</text>
      </view>
      <view class="auth_5">
        <input type="text" name='Uname' placeholder="请输入姓名" placeholder-style="color:	#C0C0C0"></input>   
      </view>
      //这里是图片部分 注意是三目运算符的方式
       <view class="auth_5" bindtap='clickCarWin'>
     	 <text class="iconfont iconzhaoxiangji" style='float:left'></text>
       </view>
    	<view hidden='{{carWin_img_hidden}}'>
        	<image src="{{carWin_img!=''?carWin_img:''}}" type="file"></image>
    	</view>
 </form>
 	 //这里绑定了提交表单的按钮
   <button form-type="submit" class="address_25"class="auth_25" >确认提交</button>

js：

Page({
	data:{
	  carWin_img_hidden: true, //展示照片的view是否隐藏
      carWin_img: '',
	},
	clickCarWin() {
   	  var that = this;
      wx.chooseImage({
      	count: 1,		//这里我只用一张图片 默认为9张
      	sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      	sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      	success: function (res) {
       	 // 无论用户是从相册选择还是直接用相机拍摄，路径都是在这里面
        	var filePath = res.tempFilePaths[0];
        	that.setData({
          	carWin_img: filePath, //把照片路径存到变量中，
          	carWin_img_hidden: false //让展示照片的view显示
        })
      }
    })
  },
  
  formSubmit: function (e) {
    var card = this.data.carWin_img;
    console.log(card);
	if (e.detail.value.Uname == 0) {
      wx.showToast({
        title: '姓名不能空!',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (card == '') {
      wx.showToast({
        title: '请选择学生证照片!',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else {
      wx.uploadFile({
        url: '服务器名/php的名字.php',//提交认证信息
        filePath: card,
        name: 'card',
        formData: {
          Uname: e.detail.value.Uname,
        },
        method: 'POST',
        header: {
          'content-type': "application/x-www-form-urlencoded",
          'content-type': 'multipart/form-data'
        },
        success: function (res) {
          console.log(res.data);
          wx.showToast({
            title: '保存成功！',
            icon: 'none',
            duration: 1500
          })
        }
      })
    }
  },
})

（普通form表单的提交见我另一篇博文）

xml中要看懂两个部分 第一部分是普通信息提交的部分，以Uname的形式传进js中，第二部分是图片。图片的显示这里用的是三目运算符的方式，最开始的data中carWin_img_hidden为true，所以样式隐藏，三目运算符中 carWin_img在最开始的时候为''，条件不成立，所以显示为''，在前端看来就是空白

    <view hidden='{{carWin_img_hidden}}'>
        <image src="{{carWin_img!=''?carWin_img:''}}" type="file"></image>
    </view>

这里用了阿里巴巴矢量库可以点击我的这篇博文看下引用方法

       <view class="auth_5" bindtap='clickCarWin'>
     	 <text class="iconfont iconzhaoxiangji" style='float:left'></text>
       </view>

触发绑定的事件clickCarWin后，调用了提供的 wx.chooseImage函数从本地相册选择图片或使用相机拍照，利用setData对data值进行改变，使照片显示。代码的关键点是var filePath = res.tempFilePaths[0];，如果输出res.tempFilePaths可以在控制台看出是一个Array(1)的形式，所以要保存现在的路径一定是选择res.tempFilePaths[0]，写到这笔者猜测是不是多张图片就是数组下角标不一样（仅猜测，有机会的话实验一下），此时照片的储存（或者说临时储存，目前显示）的方式是以路径的方式进行存储，看下控制台的打印情况

这个网址在浏览器中是无法正常打开的，在开发者工具中点击可以显示（笔者猜测是临时储存的形式，欢迎讨论指正）

接下来就是较为关键的wx.uploadFile，以前写表单查询的时候都是用wx.request，但是文件的形式是无法上传的，很多博文中的代码都是仅仅上传图片文件，不涉及其他文字信息的处理，笔者也是看了参考资料以及开放文档才有了点思路。

  formSubmit: function (e) {
    var card = this.data.carWin_img;	//这里是要上传文件资源的路径
    console.log(card);
      wx.uploadFile({
        url: '服务器名/php的名字.php',//提交认证信息 注意是https的形式
        filePath: card,		//对应着上面的card
        name: 'card',		//相当于key，和等下传到后端的php相对应
        formData: {
          Uname: e.detail.value.Uname,			// formData是请求中其他额外的 form data
        },
        method: 'POST',			//方式为POST，为了防止TSL协议不符合版本要求必须大写
        header: {
          'content-type': "application/x-www-form-urlencoded",
          'content-type': 'multipart/form-data'
        },
        success: function (res) {
          console.log(res.data);
          wx.showToast({
            title: '保存成功！',
            icon: 'none',
            duration: 1500
          })
        }
      })
  }

有的参考资料中把路径缓存，再用 wx.getStorageSync的形式调用，这里笔者并不推荐，因为假如出现二次提交的情况，即使现在不选择图片，因为缓存的原因不判断现在图片为空，并且亲测后台存储的形式仍为第一次上传的图片

在传图片到后台之前必须有一个文件夹来储存图片，有的是在php中进行文件夹创建