2017-06-25

前端图片上传的两种方法

最近做了两个表单，里面涉及到图片上传，刚开始的时候还是感觉有点慌乱，毕竟是没做过嘛，但是做完了回过头来想想，其实也没什么。

第一次是用了 base64，这样每个图片都是转换成一串代码提交，后来又需要同时上传多个图片，就采用了 FormData 的方式。下面就简单总结一下：

base64:

Base64是一种基于64个ASCII字符来表示二进制数据的表示方法。常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据。包括MIME的email、在XML中存储复杂数据。

下面是一个转换图片到 base64 上传到服务器，获取服务器地址后在页面进行预览的例子。这里需要用到 HTML5 当中的 FileReader 接口。以 Vue 展示：

template 部分代码：

<form enctype="multipart/form-data">
    <input type="file" @change="onFileChange">//点击这里上传图片
    <p id="b64"></p>//这里展示生成的base64码
    <img alt="" :src="base64" id="avatar">//这里展示图片预览
</form>

script 部分代码：

export default {
	data () {
	  return {
	    base64:''
	  }
	},
	methods: {
	  onFileChange (e) {
	    var files = e.target.files || e.dataTransfer.files;
	    if (!files.length)
	      return;
	    this.createInput(files[0]);
	  },
	  createInput(file){
        var reader = new FileReader();
        reader.onload = (e) => {
          let img_base64=reader.result
          let data={
            img_base64:img_base64
          };
          this.$ajax.post('url',querystring.stringify(data)
          ).then(response => {
            let data=response.data.body;
            this.base64=data.url;//返回的 url 地址
          }, response => {
            alert("出错啦！")
          })
        }
        reader.readAsDataURL(file);
	  }
	}
}

这样的话会有个问题，用户可能不确定要上传哪个图片，但是都被上传到后台去了，怎么办？解决办法就是让后端返回每张图片的 id，在最后提交表单的时候把 id 也一并提交上去。

注意：

往后台提交base64字符串的时候，里面的加号“+”会被识别成空格，所以需要替换一下，“%2B”是加号的编码

let newBase64 = base64.replace(/\+/g, "%2B");

FormData

FormData用于通过表单提交同时上传多张图片的情形。

html 代码：

<form enctype="multipart/form-data">
	<span>上传驾驶证<i class="file">(最多5张照片)</i></span>
	<input accept="image/*" type="file" name="licence_image" multiple>
	<span>上传行驶证<i class="file">(最多5张照片)</i></span>
	<input accept="image/*" type="file" name="certificate_image" multiple>
	<span>上传证件照</span>
	<input accept="image/*" type="file" placeholder="请上传证件照" name="head_icon">
</form>

其中 multiple 属性就是表示允许多张图片，数量是在后端进行限制的，前端暂时未找到解决办法，这里只是做个提示。accept 属性可以限制文件类型。

javascript 代码：

var formData = new FormData(document.querySelector("form"));
for (var i = 0; i < $("input[name='licence_image']")[0].files.length; i++) {
	formData.append('licence_image[]', $("input[name='licence_image']")[0].files[i]);//遍历并插入到 licence_image 这个数组里面
}
for (var i = 0; i < $("input[name='certificate_image']")[0].files.length; i++) {
	formData.append('certificate_image[]', $("input[name='certificate_image']")[0].files[i]);//遍历逼格插入到 certificate_image 数组里面
}

至于单独的一张图片不用这么处理，只需要在最后提交的时候一起提交即可：

$.ajax({
	url:'url',
	type:'post', 
	contentType: false,//必不可少
	processData: false,//必不可少
	data: formData//这里包括了所有表单的数据
}).done(function(data){
	...
})

好了，图片上传的两种方式就简单说完了，其实是不是很简单，只要按照套路来就可以了。

acelibin

格物致知

前端图片上传的两种方法

base64:

FormData