精华内容
下载资源
问答
  • 项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景...
  • 本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下 效果图 html结构 <!--点击上传按钮--> !(!item.isNew&&editBtnType[index]) click=houseUpload(index)> ...
  • 主要为大家详细介绍了vue实现图片上传到后台,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了vue项目实现图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现图片上传功能

    2020-12-28 17:48:46
    本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 先看效果 图片上传使用vant组件库中的 van-uploader, 使用方法参考官网 vant组件库 下面看代码 UploadPicture.vue <!-- ...
  • 主要介绍了vue+node实现图片上传及预览的示例方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 现在有一个需求,需要实现图片上传、展示、删除的功能,看看操作代码

    " 现在有一个需求,需要实现图片上传、展示、删除的功能,看看操作代码

    最终实现的效果
    在这里插入图片描述
    在这里插入图片描述
    上传完第一张出现第二张上传位置
    在这里插入图片描述
    传满6张就不再展示继续上传的位置,删除了又可以继续上传

    下面来看看我实现的代码

    <template>
      <div class="container">
            <div class="Uploader">
                  <div class="image">上传图片
                  <span>{{filenum}}/6</span>
                  </div>
                <div class="imgAdd">
                   <span class="itemImg" v-for="(item,index) in fileList " :key="index">
                     <img :src="item.file.src" alt="图片" class="uploadimg">
                     <img src="../assets/img/删除图片@2x.png" alt="" @click="delImg(index)" class="delte">
                   </span>
                   <div class="fileupload-box" v-show="fileList.length<=5">
                        <div class="c">
                            <input type="file"  style="display:none" id="uploadfile"  @change="fileChange($event)" accept="image/*" multiple/>
                            <img src="../assets/img/添加图片@2x.png" id="image"  @click="UploadImg">
                        </div>
    
                    </div>
                  </div>
              </div>
               <!-- 提交按钮使用了vant得button组件 -->
            <div class="btn">
                <van-button
                style="font-size=1.4rem"
                size="large"
                type="info"
                >提交</van-button>
            </div>
      </div>
    </template>
    
    <script>
    //引入组件
    import Vue from 'vue';
    import { Button} from 'vant';
    Vue.use(Button);
    
    export default {
        name:"index",
        data() {
            return {
                fileList:[],
                filenum:0,
                index:[],
                pictureId:[],
                uploadIcon:'',
                file:'',
                reader:'',
                FilePaths:[]
            }
        },
       methods:{
            //点击上传图片
    		UploadImg() {
               document.getElementById('uploadfile').click();
           },
           
           //监听上传
           fileChange(e) {
           
              console.log("监听上传",e.target);
              
              if(!e.target.files[0].size)return;
              
               let files = e.target.files
               
               for(let j = 0;j<files.length; j++ ){
               
               console.log("files",e.target.files[j]);
               
               //传入图片 调用处理
                this.fileAdd(files[j]);
                
               }
               e.target.value = ''
               
             },
          fileAdd(file) {
          
          // 判断是否为图片文件
          if (file.type.indexOf("image") == -1) {
          
          //选择文件提示
            Notify({
              message: "请选择图片文件",
              color: "#FFFFFF",
              background: "#F88C61"
            });
            return;
            
          } else {
            
            //创建文件读取对象
            let reader = new FileReader();
            
            //创建一个Image对象
            let image = new Image();
            
            let that = this;
            
    		//使用readAsDataURL读取图像文件
            reader.readAsDataURL(file);
            
            reader.onload = function() {
            
            //this.result文件读取结果转为base64并赋值
            
            file.src = this.result;
            
           // console.log(" file.src", file.src);
              
            image.onload = function() {
                
                let width = image.width;
                
                let height = image.height;
                
                file.width = width;
                
                file.height = height;
                
                console.log("file", file);
    			
    			//将上传图片push到数组里在页面上展示
    			
                that.fileList.push({ file });
                
                console.log("fileList数据", that.fileList);
                
                that.pictureId.push(that.fileList[0].file);
                
                // console.log('pictureId数据',that.pictureId);
              };
              image.src = file.src;
    
    		 //每上传一张+1
    		 
              that.filenum++;
            };
          }
        },
        
        // 点击删除
        delImg(index) {
        
          //删除指定下标的图片对象
          console.log("删除对象", index);
    
          if (isNaN(index) || index >= this.fileList.length) {
            return false;
          }
          this.fileList.splice(index, 1);
    
          console.log("删除后==", this.fileList);
          
          //图片删除上传数量-1
          this.filenum--;
        },
    }
    }
    </script>
    
    <style   scoped>
    * {
      box-sizing: border-box;
    }
    .container {
      width: 100%;
      background-color: #f5f5f5;
      height: 100vh;
    }
    .main {
      width: 100%;
      padding: 0 1.5rem;
      text-align: left;
      background-color: #fff;
      padding-top: 1.5rem;
    }
    .Uploader {
      margin-top: 1rem;
      width: 100%;
      padding: 1.5rem 0.8rem;
      text-align: left;
      background-color: #fff;
      margin-bottom: 2.2rem;
    }
    .Uploader .image {
      color: #333333;
      font-size: 1rem;
      padding-bottom: 2rem;
    }
    
    .Uploader .imgAdd {
      display: inline-block;
    }
    .imgAdd .itemImg {
      display: inline-block;
      width: 6.5rem;
      height: 6.5rem;
      border: 1px dashed #83838b;
      padding: 0.6rem;
      text-align: center;
      position: relative;
      margin-right: 0.4rem;
      margin-bottom: 0.5rem;
    }
    .itemImg .uploadimg {
      width: 5.3rem;
      height: 5.3rem;
    }
    .itemImg .delte {
      width: 1.4rem;
      height: 1.4rem;
      position: absolute;
      top: -0.7rem;
      right: -0.7rem;
      z-index: 999;
    }
    
    .image span {
      float: right;
      font-size: 1rem;
      color: #83838b;
    }
    .fileupload-box {
      width: 6.5rem;
      height: 6.5rem;
      border: 1px dashed #83838b;
      padding: 0.6rem;
      display: inline-block;
      vertical-align: top;
    }
    .van-uploader {
      vertical-align: top;
    }
    .fileupload-box {
      width: 6.5rem;
      height: 6.5rem;
      border: 1px dashed #83838b;
      padding: 0.2rem;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      margin-bottom: 1rem;
    }
    .fileupload-box img {
      width: 20px;
      height: 20px;
      margin: 0 auto;
      margin-top: 2.4rem;
    }
    .btn {
      width: 100%;
      margin-top: 2.5rem;
      padding: 0 1.5rem;
    }
    .btn .bottom {
      color: #fff;
      background: red;
      height: 4.4rem;
      line-height: 4.4rem;
      border-radius: 0.4rem;
    }
    </style>
    

    :为方便大家预览,css我也贴上来了,需要用的小伙伴更换图片文件就好
    :码字不易,拿代码请留言哦~
    :转载注明出处~ 谢谢!

    展开全文
  • 使用Vue实现图片上传及实时预览效果 今天在做字节跳动笔试题的时候遇到一个实现图片上传并且要实时预览效果的要求,网上大多数答案是基于原生js的,因为本人最近在学习vue,看了一下讲解之后结合vue的语法尝试几次...

    使用Vue实现图片上传及实时预览效果

    • 今天在做字节跳动笔试题的时候遇到一个实现图片上传并且要实时预览效果的要求
    • 网上大多数答案是基于原生js的,因为本人最近在学习vue,看了一下讲解之后结合vue的语法尝试几次之后终于实现了。
    • 核心代码放在这里主要为了自己以后好找,需要的朋友也可以进行参考。

    html部分

    <div id="app">
    	<input class="filePrew" type="file"  @change="addpht()" ref="img">
    	//change监听表单完成文件选择  ref为了在js里找到DOM元素
    	<img :src="picSrc" style="width: 200px;height:200px;" >
    </div>
    

    js部分

    <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    picSrc:null,
                },
                methods:{
                    addpht(){
                        var that=this
                        //注意这里要使用that保存this,不然下方调用f.onload的时候会出现问题
                        console.log(this.$refs.img.files)
                        var f = new FileReader()
                        f.readAsDataURL(this.$refs.img.files[0])
                        f.onload=function(){
                            that.picSrc=f.result
                        }
                    }
                }
            })
        </script>
    
    展开全文
  • H5 利用vue实现图片上传功能

    千次阅读 2020-04-29 09:41:01
    以下是我用vue实现图片上传功能,仅供参考。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,.....

    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只需要利用  获取到接收的文件即可实现上传。

    展开全文
  • SpringBoot结合Vue实现图片上传

    千次阅读 2018-10-10 18:13:58
    SpringBoot结合Vue实现图片上传 效果 页面图片上传 上传完成之后 Vue中图片上传核心代码 在main.js中引入axios   import axios from 'axios' Vue.prototype.$ajax = axios; 在图片上传的文件中...

    SpringBoot结合Vue实现图片上传

    效果

    • 页面图片上传
    • 上传完成之后

    Vue中图片上传核心代码

    • 在main.js中引入axios

       

      import axios from 'axios'
      Vue.prototype.$ajax = axios;
      
    • 在图片上传的文件中写文件上传控件

       

      <li>
          <h3>添加新图:</h3>
          <input type="file" id="saveImage" name="myphoto" accept="image/png,image/gif,image/jpeg"
                 ref="new_image">
          <el-button @click="addImage">确认添加</el-button>
      </li>
      
    • 添加图片函数

       

      addImage: function () {
          let self = this;
          if (self.$refs.new_image.files.length !== 0) {
              var formData = new FormData()
              formData.append('image_data', self.$refs.new_image.files[0]);
              //单个文件进行上传
              self.$ajax.post('/addImage', formData, {
                  headers: {
                      "Content-Type": "multipart/form-data"
                  }
              }).then(response => {
      
              })
          }
      }
      

    SpringBoot中图片下载核心控制类代码

    • 方法核心代码

       

      @RequestMapping("/addImage")
      @ResponseBody
      public String addImage(@RequestParam(name = "image_data", required = false) MultipartFile file) {
          //文件上传
          if (!file.isEmpty()) {
              try {
                  //图片命名
                  String newCompanyImageName = "newPIC";
                  String newCompanyImagepath = "D:\\"+newCompanyImageName;
                  File newFile = new File(newCompanyImagepath);
                  if (!newFile.exists()) {
                      newFile.createNewFile();
                  }
                  BufferedOutputStream out = new BufferedOutputStream(
                          new FileOutputStream(newFile));
                  out.write(file.getBytes());
                  out.flush();
                  out.close();
              } catch (FileNotFoundException e) {
                  e.printStackTrace();
                  return "图片上传失败!";
              } catch (IOException e) {
                  e.printStackTrace();
                  return "图片上传失败!";
              }
          }
          return "图片上传失败!";
      }
    展开全文
  • vue实现图片上传

    万次阅读 2018-06-28 14:00:52
    ]来选择图片,给后端传递一个formData格式的数据,然后上传。代码如下: 我写了个组件,参数如下: uploadType: 上传类型 width: 图片显示的宽度 height: 图片显示的高度 imgUrl: 如果之前有图片图片的路径...
  • 主要为大家详细介绍了vue+element实现图片上传及裁剪功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • spring boot + vue实现图片上传及展示

    万次阅读 多人点赞 2018-11-13 17:37:19
    余近日开发spring boot +vue的后台管理项目,涉及到文件上传功能,使用之前项目的文件上传模块,一直有问题。遂经过两天的百度,加个人理解,最终解决了基本的文件上传功能。  首先,html页面: &lt;!--form...
  • 本文实例讲述了vue实现上传图片到数据库并显示到页面功能。分享给大家供大家参考,具体如下: 1、点击上传图片,弹出选择图片选项框。 页面代码: 上传图片 <input type=file name=avatar id=avatar multiple=...
  • 主要为大家详细介绍了vue实现移动端图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了Vue+elementUI实现图片上传与回显功能(含回显后继续上传或删除),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了vue实现移动端图片裁剪上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Vue formData实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了vue+elementUI实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 前提:需要首先实现web端的网页上传图片(只要网页上传图片成功,后续集成和android部分的相关操作,就可以成功实现图片上传) 步骤: web端实现网页上传 web嵌入安卓webview实现安卓手机拍照和选择图片上传 问题...
  • 主要介绍了基于vue+ bootstrap实现图片上传图片展示功能,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,013
精华内容 6,405
关键字:

vue实现图片上传

vue 订阅