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实现图片上传功能。的更多相关文章

  1. vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下:   <ul class="clearfix">   ...

  2. [Ting's笔记Day8]活用套件carrierwave gem:（3）Deploy图片上传功能到Heroku网站

    前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...

  3. 前端丨如何使用 tcb-js-sdk 实现图片上传功能

    前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...

  4. thinkphp达到UploadFile.class.php图片上传功能

    片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...

  5. Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  6. PHP语言学习之php做图片上传功能

    本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...

  7. 给DEDECMS广告管理中增加图片上传功能

    dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...

  8. [Ting's笔记Day6]活用套件carrierwave gem:（1）在Rails实现图片上传功能

    carrierwave是一款经典的图片上传套件,本篇的目标是先在本地端(development)的rails项目试成功gem. (预计中集的进度会练习怎么利用Amazone S3架设图片上传Host, ...

  9. JavaScript实现单张图片上传功能

    前台jsp代码 <%@ page language="java" pageEncoding="UTF-8" contentType="text/ ...

随机推荐

  1. Linux 服务器管理建议

    Linux 服务器管理建议 一.学习Linux 的注意事项 Linux 严格区分大小写 Linux 一切皆文件 Linux 不靠扩展名区分文件类型 靠权限位标识来确定的 特殊文件要求写扩展名(给管理员 ...

  2. vue 路由跳转带参 方式query ,params

    a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:' ...

  3. Expected linebreaks to be 'LF' but found 'CRLF'.

    解决方法 在rules中加入 "linebreak-style": [0 ,"error", "windows"], 如果你需要知道原理,请 ...

  4. Bootstrap中的datetimepicker用法总结

    bootstrap时间控件参考文档(少走弯路) https://blog.csdn.net/hizzyzzh/article/details/51212867#31-format-%E6%A0%BC% ...

  5. 使用Powershell启用/关闭Windows功能

    接上一篇博客,依旧是需要制作安装包,需要开启系统的MSMQ功能.这里就用到了dism.exe DISM全称是Deployment Image Servicing and Management(部署映像 ...

  6. Linux生产环境上，最常用的一套“AWK“技巧【转】

    最有用系列: <Linux生产环境上,最常用的一套“vim“技巧> <Linux生产环境上,最常用的一套“Sed“技巧> <Linux生产环境上,最常用的一套“AWK“技 ...

  7. 2019 字节跳动java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.字节跳动等公司offer,岗位是Java后端开发,因为发展原因最终选择去了字节跳动,入职一年时间了,也成为了面 ...

  8. 【开发笔记】- QQ消息轰炸

    1.右键新建一个文本文件: 2.打开记事本将如下代码复制过去: On Error Resume Next Dim wsh,ye set wsh=createobject("wscript.s ...

  9. nodeJS实现简易爬虫

    nodeJS实现简易爬虫 需求:使用nodeJS爬取昵图网某个分类下的图片并存入本地 运用nodeJS自带系统模块http.fs 示例代码: var http =require('http'); va ...

  10. vue-quill-editor回显时移除焦点

    直接复制开用 解决在回显数据的时候会默认聚焦 this.$refs.myQuillEditor.quill.enable(false); setTimeout(() => { this.$ref ...