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="images/close.png" alt="" class="closeImg" @click='delImg(key)'>
            </div>
            <div class="inputButton">
                <img src="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: 0;
    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: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.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实现图片上传功能。

猜你喜欢