精华内容
下载资源
问答
  • vue 上传图片

    万次阅读 2017-12-12 11:31:18
    vue 用 file 的 cahnge获取到上传文件的基本信息 然后拿到图片后用 beta64 转化预览图片 uploadChange(event){ this.files = event.target.files[0]; //用来提交的图片,多个用数组装起来 if(event.target....

    vue 用 file 的 change获取到上传文件的基本信息

    <input type="file" name="file" class="upload__input" @change="uploadChange" accept="image/png,image/gif">
    <div class="imgSrc">
    	<img :src="imgDataUrl" >
    </div>
    


    然后拿到图片后用 beta64 转化预览图片

    uploadChange(event){
    	if(event.target.files.length>0){
    		this.files = event.target.files[0];  //提交的图片
    		this.$conf.getBase64(event.target,(url)=>{
    			this.imgDataUrl = 'data:image/png;base64,'+url;   //显示的图片
    		}); 
    	}
    		
    },


    beta64方法

    getBase64 : function(file,callback){
    	        var maxWidth = 640;
    	        if(file.files && file.files[0]){
    	            var thisFile = file.files[0];
    	            if(thisFile.size>2019200){
    	                // mualert.alertBox("图片不能超过800K");
    	                alert("图片不能超过2M");
    	                return
    	            };
    	            var reader = new FileReader();
    	            reader.onload = function(event){
    	                var imgUrl = event.target.result;
    	                var img = new Image();
    	                img.onload = function(){
    	                    var canvasId = 'canvasBase64Imgid',
    	                    canvas = document.getElementById(canvasId);
    	                    if(canvas!=null){document.body.removeChild(canvas);}
    	                    var canvas = document.createElement("canvas");
    	                    canvas.innerHTML = 'New Canvas';
    	                    canvas.setAttribute("id", canvasId);
    	                    canvas.style.display='none';
    	                    document.body.appendChild(canvas);
    	                    canvas.width = this.width;
    	                    canvas.height = this.height;
    	                    var imageWidth = this.width, 
    	                    imageHeight = this.height;
    	                    if (this.width > maxWidth){
    	                        imageWidth = maxWidth;
    	                        imageHeight = this.height * maxWidth/this.width;
    	                        canvas.width = imageWidth;
    	                        canvas.height = imageHeight;
    	                    }
    	                    var context = canvas.getContext('2d');
    	                    context.clearRect(0, 0, imageWidth, imageHeight);
    	                    context.drawImage(this, 0, 0, imageWidth, imageHeight);
    	                    var base64 = canvas.toDataURL('image/png',1);
    	                    var imgbase = base64.substr(22);
    	                    callback(imgbase)
    	                    //this.imgUrl = 
    	                }
    	                img.src = imgUrl;
    	            }
    	            reader.readAsDataURL(file.files[0]);
    	        }
    	    },

    提交表单

    addSub(){
    	let data  = {};
    	let files = this.files;
    	let param = new FormData(); //创建form对象
    	if(files!=''){
    		param.append('file', files,files.name); //单个图片 ,多个用循环 append 添加
    	}else{
    		this.$message.error('请添加图片');
    	}
    	param.append('param', JSON.stringify(data));//添加form表单中其他数据
    	let config = {
    	    headers:{'Content-Type':'multipart/form-data'}
    	};  //添加请求头
    	this.$ajax.post(this.ajaxUrl +'addStation',param,config)
    	  .then(response=>{
    	  	var ret = response.data;
    	    if(ret.status){
    			
    			this.$message({
    				message : '新增成功',
    				type : 'success'
    			})
    			//清空数据
    			this.imgDataUrl = '';
    			this.files = [];
    		}else{
    			this.msg(ret.msg);
    		}
    	})  
    },


    
    
    展开全文
  • 主要为大家详细介绍了vue上传图片组件的编写代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一个简单的vue上传图片的组件
  • vue上传图片组件编写

    万次阅读 热门讨论 2017-07-25 17:43:11
    编写一个vue上传图片组件: 1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片: 2.触发隐藏的文件标签:(通过原生的click来触发) document.getElementById('upload_file').click()3.获取file...

    点击打开源码 https://github.com/317482454/vue_upload

    在线查看地址:http://jqvue.com/demo/vue_upload/demo.html

    编写一个vue上传图片组件:

    1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片:

        <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>

    2.触发隐藏的文件标签:(通过原生的click来触发)

      document.getElementById('upload_file').click()
    3.获取file文件里面的值方法:fileChange($event)

      fileChange(el){
          if (!el.target.files[0].size) return;//判断是否有文件数量
          this.fileList(el.target.files);//获取files文件组传入处理
          el.target.value = ''//清空val值,以便可以重复添加一张图片
        }
    4.处理files文件组

    获取传入单个图片文件

     fileList(files){
          for (let i = 0; i < files.length; i++) {
            this.fileAdd(files[i]);
          }
        }
    处理获取到的图片文件,统计文件大小,转图片为base64以供显示

     fileAdd(file){
          this.size = this.size + file.size;//总大小
          let reader = new FileReader();
          reader.vue = this;
          reader.readAsDataURL(file);
          reader.onload = function () {
            file.src = this.result;
            this.vue.imgList.push({
              file
            });
          }
        },
    

    5.文件大小换算

       bytesToSize(bytes){
          if (bytes === 0) return '0 B';
          let k = 1000, // or 1024
            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
            i = Math.floor(Math.log(bytes) / Math.log(k));
          return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        },

    6.拖拽上传

    <div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
         或者将文件拖到此处
    </div>
      dragenter(el){
          el.stopPropagation();
          el.preventDefault();
        },
        dragover(el){
          el.stopPropagation();
          el.preventDefault();
        },
        drop(el){
          el.stopPropagation();
          el.preventDefault();
          this.fileList(el.dataTransfer.files);
        }

    最终效果如下:


    展开全文
  • vue上传图片到服务器

    千次阅读 2018-06-30 12:18:09
    vue上传图片到服务器 我们做的商家管理系统需要在添加一道菜的时候把图片上传到服务器, 流程大概是这样子的: 搭建一个文件服务器(可以与你的网站后台放在同一台物理机上) 网站后台提供上传图片的API 前端...

    vue上传图片到服务器


    我们做的商家管理系统需要在添加一道菜的时候把图片上传到服务器,
    流程大概是这样子的:

    1. 搭建一个文件服务器(可以与你的网站后台放在同一台物理机上)
    2. 网站后台提供上传图片的API
    3. 前端接收图片后把图片转成base64字符串,调用API上传图片
    4. 后台接收到base64,把base64转成图片,存到文件服务器里面,根据存储的路径生成图片的url
    5. 后台把图片的url返回给前端
    6. js接收到url之后把url赋给<img>src

    本文仅介绍前端需要的操作,即步骤3、6

    <template>
        <div>
            <!-- 选择图片 -->
            <input type="file"
                   accept="image/*"
                   @change="chooseImg" />
            <!-- 预览图片 -->
            <canvas ref="imgPreview"
                    height="0"
                    width="0"></canvas>
            <!-- 提交图片 -->
            <button @click="uploadImg">提交图片</button>
            <!-- 通过后台返回的url向文件服务器请求图片 -->
            <img :src="imgUrlFromServer">
        </div>
    </template>
    <script>
    import axios from 'axios'
    
    export default {
        name: 'uploadImg',
        data () {
            return {
                imgUrlFromServer: '#',
                base64: ''
            }
        },
        methods: {
            chooseImg (event) {
                let file = event.target.files[0]
                let reader = new FileReader()
                let img = new Image()
                // 读取图片
                reader.readAsDataURL(file)
                // 读取完毕后的操作
                reader.onloadend = (e) => {
                    img.src = e.target.result
                    // 这里的e.target就是reader
                    // console.log(reader.result)
                    // reader.result就是图片的base64字符串
                    this.base64 = reader.result
                }
                // 预览图片
                let canvas = this.$refs['imgPreview']
                let context = canvas.getContext('2d')
                img.onload = () => {
                    img.width = 100
                    img.height = 100
                    // 设置canvas大小
                    canvas.width = 100
                    canvas.height = 100
                    // 清空canvas
                    context.clearRect(0, 0, 100, 100)
                    // 画图
                    context.drawImage(img, 0, 0, 100, 100)
                }
            },
            uploadImg () {
                axios.post('http://1.2.3.4:8080/uploadImg', {
                    img: this.base64
                }).then(response => {
                    this.imgUrlFromServer = response.data.imgUrl
                })
            }
        }
    }
    </script>

    在选择图片后,<canvas>里会有图片的预览,当把图片上传到服务器后,前端收到图片的url,<img>里就会显示刚才添加的图片

    展开全文
  • vue上传图片组件

    千次阅读 2019-08-21 15:03:34
    上传图片组件 简介 上传图片组件也是后台管理系统的最重要的基础组件之一,这里功能支持图片文件类型检验,图片大小检验,图片分辨率校验以及图片比列校验等功能。 主要依赖说明 { "element-ui": "2.11.1", "vue...

    上传图片组件

    简介

    上传图片组件也是后台管理系统的最重要的基础组件之一,这里功能支持图片文件类型检验,图片大小检验,图片分辨率校验以及图片比列校验等功能。

    主要依赖说明 (先安装,步骤略)

     {
        "element-ui": "2.11.1",  
        "vue": "^2.6.10",
        "vue-router": "^3.0.1"
     }
    

    正文

    1.组件

    src/components/Upload.vue

    <template>
      <div class="custom-upload">
        <input
          :id="id"
          type="file"
          style="display: none"
          name="single"
          accept="image/*"
          @change="onChange"
        />
        <el-button size="small" type="primary" :loading="loading" @click="handleOpenFile">
          <i class="fa fa-upload" />
          添加图片
        </el-button>
        <div v-if="tips" class="tips clear-margin-top">{{ tips }}</div>
      </div>
    </template>
    
    <script>
    // 上传文件组件
    import {
      isAppropriateResolution,
      isAppRatio,
      isImageFile,
      isMaxFileSize
    } from '@/utils/upload'    // upload.js 文件见下文
    
    // 定义的接口根据自己项目更换
    import { uploadImage } from '@/api/upload'  
    
    import { Message } from 'element-ui'
    
    export default {
      name:'Upload',
      props: {
        // 最大上传文件的大小 单位(MB)
        maxFileSize: {
          type: Number,
          default: 2
        },
        // 提示内容
        tips: {
          type: String
        },
        // 图片文件分辨率的宽度
        width: {
          type: Number,
          width: 460
        },
        // 图片文件分辨率的高度
        height: {
          type: Number,
          default: 300
        },
        // 是否限制分辨率
        isResolution: {
          type: Boolean,
          default: false
        },
        // 是否限制比列
        isRatio: {
          type: Boolean,
          default: false
        },
        // 比列 ag: 1:1 时给 [1,1]
        ratio: {
          type: Array
        }
      },
      data() {
        return {
          id: 'upload-input-' + +new Date(),
          loading: false
        }
      },
    
      methods: {
        // 打开文件
        handleOpenFile() {
          const input = document.getElementById(this.id)
          // 解决同一个文件不能监听的问题
          input.addEventListener(
            'click',
            function() {
              this.value = ''
            },
            false
          )
          // 点击input
          input.click()
        },
    
        // 选择好文件
        async onChange($event) {
          this.loading = true
          const file = $event.target.files[0]
          if (!file) {
            this.loading = false
            return Message.error('选择图片失败')
          }
    
          // 限制为图片文件
          if (!isImageFile(file)) {
            this.loading = false
            return
          }
    
          // 限制文件上传大小
          if (!isMaxFileSize(file, this.maxFileSize)) {
            this.loading = false
            return
          }
    
          try {
            // 限制分辨率
            if (this.width !== 0 && this.height !== 0 && this.isResolution) {
              await isAppropriateResolution(file, {
                width: this.width,
                height: this.height
              })
            }
    
            // 限制比列
            if (this.isRatio && this.ratio && this.ratio.length === 2) {
              await isAppRatio(file, this.ratio)
            }
            // 开始上传
            this.upload(file)
          } catch (error) {
            Message.error(error.message || '上传失败')
            console.log(error)
            this.loading = false
          }
        },
    
        // 自定义上传
        async upload(file) {
          try {
            const res = await uploadImage(file)
            this.$emit('subUploadSucceed', res)
            Message.success('上传成功')
            this.loading = false
          } catch (error) {
            this.loading = false
            console.log(error)
            Message.error(error.message || '上传失败')
          }
        }
      }
    }
    </script>
    
    <style lang="scss"  scoped >
    .custom-upload {
      .tips {
        margin-top: 10px;
        color: red;
        font-size: 12px;
      }
      .clear-margin-top {
        margin-top: 0;
      }
    }
    </style>
    
    

    2.使用

    <template>
      <div>
        <app-upload
          tips="请上传720*294的图片"
          :is-resolution="true"
          :width="720"
          :height="294"
          @subUploadSucceed="handleUploadSucceed"
        />
        <img v-if="url" :src="url" class="image-size" />
      </div>
    </template>
    
    <script>
    import AppUpload from '@/components/Upload'
    export default {
      name: 'Banner',
      components: {
        AppUpload
      },
      data() {
        return {
          url: ''
        }
      },
      methods: {
        // 海报上传成功
        handleUploadSucceed(url) {
          this.url = url
        }
      }
    }
    </script>
    
    <style rel="stylesheet/scss" lang="scss" scoped>
    .image-size {
      margin-top: 10px;
      width: 150px;
      height: 92px;
      cursor: pointer;
    }
    </style>
    

    3.补充src/utils/upload.js 文件

    import { Message } from 'element-ui'
    
    /**
     *
     * @param {file} file 源文件
     * @desc 限制为图片文件
     * @retutn 是图片文件返回true否则返回false
     */
    export const isImageFile = (file,fileTypes) => {
      const types =fileTypes|| [
        'image/png',
        'image/gif',
        'image/jpeg',
        'image/jpg',
        'image/bmp',
        'image/x-icon'
      ]
      const isImage = types.includes(file.type)
      if (!isImage) {
        Message.error('上传文件非图片格式!')
        return false
      }
    
      return true
    }
    
    /**
     *
     * @param {file} file 源文件
     * @param {number} fileMaxSize  图片限制大小单位(MB)
     * @desc 限制为文件上传大小
     * @retutn 在限制内返回true否则返回false
     */
    export const isMaxFileSize = (file, fileMaxSize = 2) => {
      const isMaxSize = file.size / 1024 / 1024 < fileMaxSize
      if (!isMaxSize) {
        Message.error('上传头像图片大小不能超过 ' + fileMaxSize + 'MB!')
        return false
      }
      return true
    }
    
    /**
     *
     * @param {file} file 源文件
     * @desc 读取图片文件为base64文件格式
     * @retutn 返回base64文件
     */
    export const readFile = file => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          resolve(data)
        }
        reader.onerror = () => {
          const err = new Error('读取图片失败')
          reject(err.message)
        }
    
        reader.readAsDataURL(file)
      })
    }
    
    /**
     *
     * @param {string} src  图片地址
     * @desc 加载真实图片
     * @return 读取成功返回图片真实宽高对象 ag: {width:100,height:100}
     */
    export const loadImage = src => {
      return new Promise((resolve, reject) => {
        const image = new Image()
        image.src = src
        image.onload = () => {
          const data = {
            width: image.width,
            height: image.height
          }
          resolve(data)
        }
        image.onerror = () => {
          const err = new Error('加载图片失败')
          reject(err)
        }
      })
    }
    
    /**
     *
     * @param {file} file 源文件
     * @param {object} props   文件分辨率的宽和高   ag: props={width:100, height :100}
     * @desc  判断图片文件的分辨率是否在限定范围之内
     * @throw  分辨率不在限定范围之内则抛出异常
     *
     */
    export const isAppropriateResolution = async(file, props) => {
      try {
        const { width, height } = props
        const base64 = await readFile(file)
        const image = await loadImage(base64)
        if (image.width !== width || image.height !== height) {
          throw new Error('上传图片的分辨率必须为' + width + '*' + height)
        }
      } catch (error) {
        throw error
      }
    }
    
    /**
     *
     * @param {file} file 源文件
     * @param {array} ratio   限制的文件比例 ag:  ratio= [1,1]
     * @desc 判断图片文件的比列是否在限定范围
     * @throw  比例不在限定范围之内则抛出异常
     */
    export const isAppRatio = async(file, ratio) => {
      try {
        const [w, h] = ratio
        if (h === 0 || w === 0) {
          const err = '上传图片的比例不能出现0'
          Message.error(err)
          throw new Error(err)
        }
        const base64 = await readFile(file)
        const image = await loadImage(base64)
        if (image.width / image.height !== w / h) {
          throw new Error('上传图片的宽高比例必须为 ' + w + ' : ' + h)
        }
      } catch (error) {
        throw error
      }
    }
    
    
    展开全文
  • 主要介绍了vue上传图片到oss的方法示例(图片带有删除功能),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue上传图片压缩

    千次阅读 2020-08-26 16:52:11
    由于最近项目需要用到上传压缩图片在网上找了一些资料不太好用,在git上找了一下这个压缩框架非常好用,也非常简单,适合一个页面多个上传图片和单个上传图片使用,多个上传图片可以封装一下,这边我就不上传多个...
  • vue上传图片 简单示例

    2019-03-13 17:55:23
    vue中如何上传图片呢?如何使用ajax/axios上传图片?,其实很简单,废话不多说,直接上代码,前端 &lt;template&gt; &lt;div&gt; &lt;!--点击选择图片--&gt; &lt;input @change="...
  • vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题
  • Vue上传图片预览以及删除的vue组件

    千次阅读 2017-03-31 08:44:04
    上传图片预览以及删除的vue组件 https://github.com/kinsliy/vue-img-preview-delete Git clone 到本地,打开 index.html 就可以了
  • 使用 VueCropper 第三方库,对上传图片进行移动,缩放,裁剪等功能。
  • vue上传图片并压缩

    2020-05-12 14:41:22
    需求:点击用户头像选择本地图片压缩上传到服务器 这里用vant UI组件的Uploader 文件上传 按需加载Uploader import {Uploader} from 'vant'; Vue.use(Uploader) 在dom上 <van-uploader :after-read=...
  • vue上传图片及其图片回显

    千次阅读 2020-07-06 16:15:09
    <div class="file"> <input type="file" class="updata" accept="image/*" @change="change($event)" ref="updata"> <img :src="imageUrl ?...这里的 img使用了动态绑定src 如果上传图片就显示上传
  • vue上传图片(压缩、base64)

    千次阅读 2019-05-16 16:42:49
    vue上传图片(压缩、base64) <el-form-item label="产品图标:"> <span v-if="firImg" class="spanImg"> <img v-if="firImg" :src="firImg" alt="" class="avatar limImg"> <input...
  • vue上传图片并预览

    千次阅读 2019-03-29 21:51:51
    4.上传图片 //上传 imageSubmit(){ let _this=this let x = document.getElementById('saveImage').files[0]; let params = new FormData() ; //创建一个form对象 params.append('file',x,x.name); //...
  • Vue上传图片图片,img标签显示图片

    千次阅读 2019-08-22 15:55:52
    有很多时候,会有图片上传的需求,用户选择上传图片后,要求在界面进行显示,当点击保存,或者确定按钮的时候上传到服务器。 话不多说直接上代码 <input type="file" @change="uploadImg" ref="uploadFile" name...
  • vue 上传图片转base64数据流发送给后端 1.在这个方法里边转参数file 2.在handleAvatarSuccess 这个发布方法里边这样写 3.如果报这个错误就这样写打印出来file依次类推 "TypeError: Failed to execute '...
  • vue上传图片formdata

    2020-09-25 11:19:09
    } }, 小程序 /** * 上传图片 * @param {String} tempFilePath 图片路径 */ export const uploadImage = tempFilePath => { return wxp.uploadFile({ url: baseURL + '/weapp' + '/common/uploadali', filePath: ...
  • 原生上传图片到服务器上次给大家分享过下面的文章结合element-ui上传图片到服务器基于上面的原理,我又替大家把整个配置封装好了,大家在使用的时候直接引入配置文件即可。无需引入element-ui,并且增加了部分功能:...
  • vue上传图片到阿里云

    2019-10-14 17:50:43
    vue中使用 在main中导入 import oss from ‘ali-oss’ window.oss = oss 在方法中使用: //这里的四个参数都是后端给的 var client = new oss({ region: "", //云账号AccessKey有所有API访问权限,建议遵循阿里云...
  • vue上传图片视频获取进度

    千次阅读 2019-08-14 19:19:17
    上传图片/视频获取上传进度 上传图片/视频因数据量大时,或者网络不佳时,则需要显示上传进度 <input type="file" ref="video" accept="video/mp4" @change="uploadvideo($event)"/> uploadvideo(e){ var ...
  • vue上传图片到OSS

    千次阅读 2019-05-16 20:50:55
    对接阿里云-OSS,可通过环境变量配置 OSS 信息,可自定义域名,支持多选、限制文件大小、删除、粘贴上传功能,拖拽上传功能,让上传功能更加简单 重点说明下:对vue版本要求在2.6往上 OSS必须设置跨域 import ...
  • vue上传图片,图片预览显示的方法

    千次阅读 2018-10-17 09:53:55
    vue项目中,经常有图片...2.上传图片到服务器 &lt;div&gt; &lt;div class="fl width-28per pos-relative" style="height: 80px;width: 80px"&gt; &lt;img src="st...
  • //上传图片的宽高 const maxWidth = 1000, //设置一个canvas 的最大宽高 maxHight = 1000; if (originWidth > maxWidth || originHeight > maxHight) { //计算出图片的缩放比例 if (originWidth > originHeight) ...
  • 选择图片时裁剪,缩放的效果 点击完成之后的预览效果 实现步骤 第1步: npm i clipic --s 第2步 <template> <div> <div class="photo"> <img :src="base64" /> <input type...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,682
精华内容 11,872
关键字:

vue上传图片

vue 订阅