H5 利用vue实现图片上传功能。

H5的上传图片如何实现呢？

以下是我用vue实现的图片上传功能，仅供参考。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>任务系统</title>

    <script src="js/base.js"></script>

    <link rel="stylesheet" href="css/base.css">

    <link rel="stylesheet" href="css/inputImg.css">

    <link rel="shortcut icon" href="#" />

    <script src="js/jquery.min.js"></script>

    <script src="js/vue.js"></script>

    <script src="js/config.js"></script>

</head>

<body>

    <div id="app">

        <textarea class='pingjiaContent' @input="descInput" maxlength='200' placeholder="请描述任务完成情况及截图" name="" id=""

            cols="30" rows="4" v-model="desc">

        </textarea>

        <div class="imgBox">

            <div class="uploadBox" v-for="(value, key) in imgs">

                <img :src="getObjectURL(value)" alt="" class="uploadImg">

                <img src="data:images/close.png" alt="" class="closeImg" @click='delImg(key)'>

            </div>

            <div class="inputButton">

                <img src="data:images/add.png" alt="" class="addImg">

                <input type="file" class="upload" @change="addImg" ref="inputer" multiple

                    accept="image/png,image/jpeg,image/gif,image/jpg" />

            </div>

            <div class="submitTask" @click="submit">

                提交任务

            </div>

            <div class="back">

                返回

            </div>

        </div>

    </div>

    <script>

        new Vue({

            el: '#app',

            data: {

                formData: new FormData(),

                imgs: {},

                imgLen: 0,

                txtVal: 0,

                desc: "",

            },

            created() {

            },

            methods: {

                descInput() {

                    // this.txtVal = this.desc.length;

                },

                addImg(event) {

                    let inputDOM = this.$refs.inputer;

                    // 通过DOM取文件数据

                    this.fil = inputDOM.files;

                    console.log(inputDOM.files)

                    let oldLen = this.imgLen;

                    for (let i = 0; i < this.fil.length; i++) {

                        let size = Math.floor(this.fil[i].size / 1024);

                        if (size > 5 * 1024 * 1024) {

                            alert('请选择5M以内的图片！');

                            return false

                        }

                        this.imgLen++;

                        this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i]);

                        console.log(this.imgs);

                    }

                },

                getObjectURL(file) {

                    var url = null;

                    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;

                },

                delImg(key) {

                    this.$delete(this.imgs, key);

                    this.imgLen--;

                },

                // 提交上传图片

                submit() {

                    console.log(this.imgs)

                    console.log(11)

                    for (let key in this.imgs) {

                        let name = key.split('?')[0];

                        console.log(this.imgs[key]);

                        this.formData.append(name, this.imgs[key]);

                    }

                    // $.ajax({

                    //     url: '/material/uploadFile',

                    //     type: 'POST',

                    //     cache: false, //上传文件不需要缓存

                    //     data: this.formData,

                    //     processData: false, // 告诉jQuery不要去处理发送的数据

                    //     contentType: false, // 告诉jQuery不要去设置Content-Type请求头

                    //     success: function (data) {

                    //     },

                    //     error: function (data) {

                    //     }

                    // })

                },

            }

        });

    </script>

</body>

</html>

html,

body {

    width: 100%;

    height: 100%;

    font-family: "微软雅黑";

    background: #F8F8F8 !important;

}

#box {

    width: 100%;

    position: relative;

    height: 100%;

}

.pingjiaContent {

    width: 100%;

    border-radius: 0.1rem;

    /* border: 1px solid #CACACA; */

    padding: 0.2rem;

    box-sizing: border-box;

    outline: none;

    margin-bottom:;

    border: none;

    resize: none;

}

.uploadBox {

    width: 2rem;

    height: 2rem;

    position: relative;

    margin-right: 0.15rem;

    margin-bottom: 0.35rem;

}

.uploadImg {

    width: 100%;

    height: 100%;

    overflow: hidden;

}

.closeImg {

    width: 0.5rem;

    height: 0.5rem;

    position: absolute;

    top: 2%;

    right: 1%;

}

.inputButton {

    width: 2rem;

    height: 2rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border: 1px solid #cdcdcd;

    position: relative;

    margin-right: 0.15rem;

    margin-bottom: 0.35rem;

}

.addImg {

    width: 1.2rem;

    height: 1.2rem;

}

.upload {

    width: 100%;

    height: 100%;

    opacity:;

    position: absolute;

    top:;

    left:;

    z-index:;

}

.imgBox {

    width: 100%;

    background: #fff;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    padding-bottom: 0.5rem;

    box-sizing: border-box;

    padding: 0.5rem;

}

.submitTask {

    background: #EF504D;

    width: 100%;

    height: 0.8rem;

    color: #fff;

    font-size: 0.32rem;

    line-height: 0.8rem;

    text-align: center;

    border-radius: 0.1rem;

    margin-top: 0.8rem;

}

.back {

    background: #F7F7F7;

    width: 100%;

    height: 0.8rem;

    color: #4D4D4D;

    font-size: 0.32rem;

    line-height: 0.8rem;

    text-align: center;

    border-radius: 0.1rem;

    margin-top: 0.4rem;

    border: 1px solid #E0E0E0;

}

后台PHP只需要利用获取到接收的文件即可实现上传。

巴特西

H5 利用vue实现图片上传功能。

最新文章

热门文章