移动端多图片上传并本地预览

由于form表单提交数据会导致页面刷新，而且最重要的是不能拿到返回值做回调处理，所以这里使用了H5的
formData 实现无刷新上传，用axios做数据请求，至于本地预览则使用了h5的 FileReader 接口来实现。

下面以vue模板的代码作为例子

1. template的部分代码

<div class="pic-wrap">
    <template v-for="(url,index) in picArr">
        <span class="pic-container">
        <span :style="{'background-image': 'url('+url+')'}" class="img"><i @click="delPic(index)"></i></span></span>
    </template>
    <span v-show="isShowFileInput" class="pic-container">
        <span class="btn"><input name="pic" ref="fileInput" @change="selectFile" type="file" /></span>
    </span>
</div>

这里通过将文件类型的input框设置透明度为0，再用class为btn的span去覆盖本来的样式

2.提交方法的代码

submitPost() {
            if(!this.isCanSubmit)return;
            Indicator.open();
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };
            let params = common.base64Encode('cmd=forum.forumPublish&content='+this.textValue+'&token='+this.token);
            let formData = new FormData();
            formData.append('param',params);
            if(this.fileArr.length){
                this.fileArr.forEach((item) =>{
                    formData.append('pic[]',item);
                });
            }
            axios.post('/index.php',formData,config).then(res => {
                Indicator.close();
                if(res.data.code === 0){
                    Toast('發佈成功');
                    setTimeout(() => {
                        this.$router.push({
                            name:'index'
                        });
                    },2000);
                }
            })                      

        }

axios.post方法支持在第三个参数书写你的请求配置，这里需要在header标明content-type:'multipart/form-data'，params是除了文件以外提交的其他数据，再存入多张图片时，name的写法要记得写成'name[]'的形式，因为后台拿到的是一个数组。到这里就实现了多图片文件和其他表单数据一起提交的功能。

3.选择图片的方法代码

selectFile(e) {
            let files = e.target.files || e.dataTransfer.files;
            if(files.length){
                let allImgExt = '.jpg|.jpeg|.gif|.bmp|.png|';
                let filePath = this.$refs.fileInput.value;
                let extName = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();

                if(allImgExt.indexOf(extName+'|') == -1){
                    //該文件類型不是img
                    Toast('請選擇正確的文件類型！');
                    return;
                }
                let arr=filePath.split('\\');
                let fileName=arr[arr.length-1];
                let file = this.$refs.fileInput.files[0];
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = () => {
                    this.picArr.push(reader.result);
                    this.fileArr.push(file);
                }

            }
            this.$refs.fileInput.value = '';
        }

这里通过FileReader对象的readAsDataURL将图片文件编码成base64的字符串，用于我们在前端预览。在onloadend方法里面可以拿到FileReader对象的result，然后将result塞进你的图片数组，picArr用于预览，fileArr用于提交时遍历塞进formData.

页面截图如下：