vue使用element上传并展示图片、视频

1.上传图片

• html

<div class="main_item">
            <div class="itemLeft">
              <span class="must">商品缩略图:</span>
            </div>
            <div class="itemRight">
              <!-- itemRight2 -->
              <el-upload
                action
                v-model="imageUrl.file"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-error="uploadError"
                :before-upload="beforeAvatarUpload"
                accept="image/png, image/jpg, image/jpeg"
                class="avatar-uploader"
              >
                <img v-if="imageUrl.url" :src="imageUrl.url" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>

• js

// 图片上传成功提示，视频上传也用这个方法，以下不重复写
    handleAvatarSuccess(res, file, fileList) {
      this.$message({
        center: true,
        message: '图片上传成功',
        type: 'success',
      })
    },
    //视频上传也用这个方法，以下不重复写
    uploadError() {
      // ?不需要，上传失败操作
    },
    //上传前回调
    beforeAvatarUpload(file) {
      // ++
      console.log(file)
      this.imageUrl.file = file
      this.imagePreview(this.imageUrl.file, 1)
      return false
    },
    //**重点**，上传的文件转化为base64格式，用于展示，视频也是调用这个方法
    imagePreview(file, v) {
      var self = this
      //定义一个文件阅读器
      var reader = new FileReader()
      //文件装载后将其显示在图片预览里
      reader.onload = function (e) {
        //将bade64位图片保存至数组里供上面图片显示
        if (v == 1) {
          self.imageUrl.url = e.target.result
        } else {
          self.vedioUrl.url = e.target.result
        }
      }
      reader.readAsDataURL(file)
    },

2.视频

html

<div class="main_item">
            <div class="itemLeft">
              <span class="nomust">商品短视频:</span>
            </div>
            <div class="itemRight">
              <el-upload
                action
                v-model="vedioUrl.file"
                :multiple="false"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-error="uploadError"
                :before-upload="beforeAvatarUpload2"
                accept="video/mp4"
                class="avatar-uploader"
              >
                <video v-if="vedioUrl.url" :src="vedioUrl.url" class="avatar" controls="controls"></video>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>

js

//缺少的方法和图片上传相同
beforeAvatarUpload2(file) {
      console.log(file)
      this.vedioUrl.file = file
      this.imagePreview(this.vedioUrl.file, 2)
      return false
    },

补充：
1.当auto-upload为false的时候，before-upload方法失效！
2.new FileReader()

• 调用FileReader对象的方法
  方法名 参数 描述

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

• 处理事件

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

var input  = document.getElementById("file");   // input file
input.onchange = function(){
    var file = this.files[0];
        if(!!file){
            var reader = new FileReader();
            // 图片文件转换为base64
            reader.readAsDataURL(file);
            reader.onload = function(){
                // 显示图片
                document.getElementById("file_img").src = this.result;
        }
    }
}

JS前端创建html或json文件并浏览器导出下载，超全