VUE 关于图片表单提交

之前从没有用过<input type="file"/>来上传图片，实在是难倒我了，虽然很简单，但是我之前写的时候走入了一个深坑。

 

一开始我网上百度了，发现可以预览图片，就跟着大神的步骤去写了，结果到提交给后台的时候出现了问题，我提交的是base64或是其他的格式，可我的后台同事没有写这样的请求方式，所以未能提交成功图片。后台同事跟我说，很简单的，就只需要提交一个图片就好了，不需要你写什么东西，但是愚笨的我还是不理解，跑去请教我之前的大学同学，结果我的同学一脸懵，因为他觉得太low了。不过他还是教了我，但他教的我跟我之前理解的一样，我提交的时候后台发送给我了写入错误的提示。不得已我就去问了后台的同事，他就把代码发给我了，我发现按他的方式是可以提交的，但是他是通过form表单和input提交的方式去提交的，但是我之前是想通过获取到图片的input内容去提交，但仍提示错误，我就放弃了，所以我在这里贴上用form表单操作的代码

<!--内容-->
            <form action="您的接口" method="post" enctype="multipart/form-data" target="stop">
                <p><input type="text" name="token" v-model="dakatoken" style="display: none;"></p>
                <div class="daka">
                    <div style="color: #999;">请选择打卡分区:</div>
                    <select @change="getFen" v-model="fenName" style="border: 1px solid #d3eaff!important;">
                        <option v-for="item in fenquAll" :key="item.id" :value="item.id">{{item.name}}</option>
                    </select>
                    <div style="color: #999;">请选择打卡分区的地点:(先选择打卡分区)</div>
                    <select @change="getPian" v-model="seName" style="border: 1px solid #d3eaff!important;" name="dizhi">
                        <option v-for="item in pianquAll" :key="item.id" :value="item.id">{{item.name}}</option>
                    </select>
                </div>

                <!--图片预览-->
                <div class="add-img">
                    <p class="font14">上传图片(最多0张，还可上传<span v-text="1
                    -imgList.length"></span>张)</p>
                    <ul class="img-list" style="height: 180px;">
                        <li v-for="index in imgList">
                            <img class="del" src="../../img/dacha.png" @click.stop="delImg(index)" />
                            <img :src="index.src" id="show" width="100%" height="100%">
                        </li>
                    </ul>
                </div>
                <!--添加图片按钮-->
                <input @change="changepic($event)" id="file" class="filepath" type="file" name="img" multiple="multiple" style="display: none;"><br>
                <div class="add" @click="chooseType">
                    <div class="add-image" align="center">
                        <img src="../../img/photo.png" alt="" width="33px" />
                        <p class="font13">添加图片</p>
                    </div>
                </div>
                <p>
                    <div class="daka_baidu" style="height: 300px;background: #d3eaff;">
                        <div class="daka-content" @click="daka($event)">
                            <input type="text" v-model="dakazuobiao" name="zuobiao" style="display: none;" />
                            <baidu-map @ready="getAxis" id="allmap_daka" :scroll-wheel-zoom='true'></baidu-map>
                            <img src="../../img/shoushi.png" alt="" width="100px" style="    margin-top: 24px;" />
                            <p style="color: #FFFFFF;font-size: 20px;">抄表打卡</p>
                        </div>
                    </div>
                    <input type="submit" value="submit" id="input_daka" style="display: none;">
                </p>
            </form>
            <!--由于form表单提交会有默认的跳转事件，用iframe禁止点击提交跳转到别的页面 name 值 跟form 标签的 name 值一样-->
            <iframe name="stop" style="display: none;"></iframe>

这个接口需要提交坐标，地址，图片和本人id，所以都是通过方法先获取然后在渲染上去提交

以下是关于图片预览的方法

//通过获取input的点击事件来给图片框注释事件
            chooseType() {
                //获取到input的点击事件
                document.getElementById('file').click();
            },
            //input获取图片文件
            changepic(obj) {
                //这里可以获取上传文件的name
                var newsrc = this.getObjectURL(obj.target.files[0]);
                let _this = this;
                if(newsrc == undefined) {
                    return
                } else {
                    _this.imgList.push({
                        src: newsrc
                    })
                }
            },
            //建立一个可以获取到file文件的URL路径
            getObjectURL(file) {
                if(this.limit !== undefined) this.limit--;
                if(this.limit !== undefined && this.limit < 0) return;
                console.log(this.limit)
                var url = null;
                // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
                if(window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if(window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if(window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            },