首页 > Web开发 > 详细

vue中原生file上传图片

时间:2019-02-15 18:43:27      阅读:912      评论:0      收藏:0      [点我收藏+]

效果

技术分享图片

 

视图层

<el-form-item class="file-box"
label="微信分享图片url链接"
prop="wx_share_img_url">
<input ref="shareFile"
class="file-item wx-file-item"
type="file"
@change="changeImg" >
<div class="el-input__inner">
{{ form.wx_share_img_url }}
<el-button size="small"
type="primary">点击上传</el-button>
</div>
</el-form-item>
<el-form-item class="file-box"
label="额外参数(目前用于app活动页图片地)"
prop="extra">
<input ref="extraFile"
class="file-item"
type="file"
@change="changeImg" >
<div class="el-input__inner">
{{ form.extra }}
<el-button size="small"
type="primary">点击上传</el-button>
</div>
<!-- <img ref="imgzs"
src="" > -->
</el-form-item>

method

    // 上传图片
    changeImg(e) {
      console.log(e, 1111)
      var that = this
      var file = e.target.files[0] || e.dataTransfer.files[0]
      var fileSize = file.size || file.fileSize
      var fileName = file.name
      var len = e.target.classList.length
      console.log(file.size, 2111)
      if (file.name.lastIndexOf(.) === -1) {
        this.$message.info(路径不正确)
        return false
      }
      var AllImgExt = .jpg|.jpeg|.gif|.bmp|.png|.swf
      var extName = file.name.substring(file.name.lastIndexOf(.)).toLowerCase()
      if (AllImgExt.indexOf(extName + |) === -1) {
        this.$message.info(非法图片格式)
        return false
      }
      if (fileSize < 3145728) {
        if (window.FileReader) {
          var reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = (e) => {
            console.log(e.target + img)
            console.log(e.target.result + img)
            // that.$refs.imgzs.src = e.target.result
            if (len > 1) {
              that.form.wx_share_img_url = fileName
              that.formData.set(share_img, file)
              console.log(file, share_img)
              // that.formData.set(‘share_img‘, e.target.result)
            } else {
              console.log(file, list_img)
              that.form.extra = fileName
              that.formData.set(list_img, file)
            }
            $(‘#imgshow‘).get(0).src = e.target.result;
            that.isUploadImg = true
          }
        }
      } else {
        this.$message.info(图片大小超过限制)
        return false
      }
    }

注意:多个文件上传图片时使用class的长度进行判断

使用new FileReader()对象是为了实现图片预览功能

,如果需要传图片的路径给后端是用  e.target.result 读取,这个读取出来的值是base64位可以直接在页面上渲染预览图片,如果是后端需要原生的值就是传

e.target.files[0] || e.dataTransfer.files[0]  具体见后台活动列表编辑

vue中原生file上传图片

原文:https://www.cnblogs.com/qdlhj/p/10385168.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!