Vue2移动端图片上传

1.vant2 uploader组件实现文件上传(图片) && 图片压缩

### 模板

<template>
    <div class="page" @click="hiddenList">
        <MyHeader :backPre="true" backColor="#fff" pageTitle="关系证明"/>
        <Loading v-if="loading" />
        <div class="content" v-else>
          <section>
            <div class="tips-title">
              <div class="tips">请提供关系证明材料:</div>
            </div>
            <van-cell>
              <lazy-component>
              <van-uploader v-model="fileList"
                        :show-upload="showupload"
                        :before-read="beforeRead"
                        :after-read="afterRead"
                        :before-delete="beforeDelete"
                        :deletable="deletable"
                        @delete="delUploadedPhoto"
                        :multiple="true"
                        :preview-image="true"
                        :lazy-load='true'
              />
              </lazy-component>
            </van-cell>
          </section>
        </div>
     </div>
</template>

###  js 代码

<script>
import { Toast } from 'vant'
//引入图片压缩(配合vant-uploader组件使用)
import ImageCompressor from 'image-compressor.js'
export default {
  name: 'PersonInfo',
  data () {
    return {
      loading: false,
      showList: {},
      fileList: [], // 已上传的文件列表
      noUploadList:[],//未上传图片列表(base64的图片)
      applyId: 0,
      deletable: true,//是否展示删除按钮
      showupload: true,//是否展示上传区域
      NoinsuId: null,
      flag: true
    }
  },
mounted () {
    //初始化调用获取图片函数
    this.querybefore()
  },
  destroyed () {
    this.flag = false
  }
}
  methods: {
    //封装提示弹窗
  dialogFn (msg) {
    Toast.clear()
    this.$dialog.alert({
      title: '温馨提示',
      message: msg
    })
  },
    // 创建Convert方法
    async querybefore () {
      // isShow为员工福利计划页面标识，只查看历史图片信息，不允许删除、新增
      const isShow = this.$route.params.isShow
      if (isShow == 1) {
        //不展示删除按钮
        this.deletable = false
        //不展示上传区域
        this.showupload = false
      }
      //获取关系证明材料请求  参数applyId,insuId
       try{
         const data = await this.$axios.post(
        '/queryInsuImagefile',
        {
          applyId: this.$route.params.applyId,
          insuId: this.$route.params.insuId
        }
      )
        //不为空 && isSuc==1    成功 展示图片
        if (data.data != null && data.ecsMessage.isSuc == 1) {
          //转为数组
          const fileDetailList = eval(data.data.dataList)
          //数组存在 && 长度>0
          if (fileDetailList && fileDetailList.length > 0) {
            //遍历获取每一项图片相关数据
            fileDetailList.forEach((file) => {
              //调用获取图片函数
              this.queryImg(file)
              })
          }
        }
     }catch(e){
         this.dialogFn(e.message)
     }
    },
    //封装获取图片函数(请求会发多个,因为单文件上传,有多少图片获取多少次)
  async queryImg(file){
         const res = await this.$axios.post('/queryInsuImgFile',{
          applyId:file.APPLY_ID,
          insuId:file.INSU_ID,
          fileId:file.FILE_ID
         })
           //返回值不为null && 返回状态为 success
           if(res.data.dataList!=null&&res.ecsMessage.code==='SUCCESS'){
              //转为数组
             const fileDetailList = eval(res.data.dataList);
             fileDetailList.forEach((item)=>{
               //base64转url
               const url = 'data:image/jpeg;base64,' + item.base64Src;
               //遍历添加进 fileList 预览图片数组
               this.fileList.push({
                 url,
                 isImage: true,
                 applyId: file.APPLY_ID,
                 insuId: file.INSU_ID,
                 fileDesc: file.FILE_DESC,
                 fileId: file.FILE_ID
               })
             });
           }else{
             //请求失败提示
             this.$dialog.alert({
               title: '温馨提示',
               message: '获取图片失败!'
             })
           }

  },


    // 上传前的校验(文件读取前的回调)
    beforeRead (file) {
      //大小 && 类型
      const { size, type, name } = file
      //最大值
      const filemaxsize = 10 * 1024 * 1024 // MB
      //超出最大值
      if (size > filemaxsize) {
        //弹窗提示
        this.$dialog.alert({
          title: '温馨提示',
          message: '文件需小于10M'
        })
        return false
      }
      // 校验上传图片是否重复
      //获取已经存在的图片
      const files = eval(this.fileList)
      for (let i = 0; i < files.length; i++) {
        // console.log(' 本地' + file.name)
        // console.log(' 历史' + files[i].fileDesc)
        //判断图片名是否相等
        if (file.name === files[i].fileDesc) {
          this.$dialog.alert({
            title: '温馨提示',
            message: '不允许上传同一张图片'
          })
          return false
        }
      }
      //判断图片类型 是否为jpeg  jpg  png之一
      if (
        type !== 'image/jpeg' &&
        type !== 'image/png' &&
        type !== 'image/jpg'
      ) {
        this.$dialog.alert({
          title: '温馨提示',
          message: '文件格式应为png jpg jpeg格式图片'
        })
        return false
      }
      return true
    },
    // 删除图片前回调
    beforeDelete (file,detail) {
       //返回Promise对象
      return new Promise((resolve, reject) => {
        this.deleImg(file,detail);
     })
     //是否禁用文件上传
     if (this.disabled) return false
     else return true
 },
//封装删除图片函数
 async deleImg(file,detail) {
     try{
         const result = await this.$axios.post('/rmInsuImgfile', {
         fileId: file.fileId,
         applyId: file.applyId,
         insuId: file.insuId
 	});	
     //如果返回值不为空 && 返回状态信息为 success
     if (result != null && result.ecsMessage.code == 'SUCCESS') {
         //获取删除后的剩余图片
         const jsonText = eval(result.ecsMessage);
         //剩余图片数据不为空 && isSuc>0
         if (jsonText != null && jsonText.isSuc > 0) {
             //弹窗删除成功
             this.$dialogFn('删除成功')
             this.fileList.splice(detail.index, 1)
         } else {
             //剩余图片数据不为空 && isSuc>0 条件之一不满足
             this.$dialogFn('服务器无法响应,请稍后再试!')
             }
         }else{
             this.$dialogFn('此图片不能删除!')
         }   
    }catch(e){
        this.$dialogFn(e.message)
    }
 },

 // 删除图片
 delUploadedPhoto (file) {},

 uploadFile (item) {
     this.uploadInsuId = item.INSU_ID
 },

 //图片压缩函数
 compressFile(file) {
     return new Promise((resolve, reject) => {
         new ImageCompressor(file, {
                         quality: 0.6, //压缩质量
                         checkOrientation: false, //图片翻转，默认为false
         success(result) {
                 resolve(result);
                 },
         error(e) {
                 reject()
                 }
             })
         })
 },
 // 上传图片(文件读取完成后的回调)
 async afterRead (imgFile) {
     const applyId = this.$route.params.applyId
     const insuId = this.$route.params.insuId
     //调用图片压缩函数
     let file = await this.compressFile(imgFile);
     //new 一个新的文件对象
     const formData = new FormData()
     //添加file (文件相关信息对象: type,name,size,lastModified)
     formData.append('file', file.file)
     //添加applyId
     formData.append('applyId', applyId)
     //添加insuId
     formData.append('insuId', insuId)
     const config = {
         headers: {
             'Content-Type': 'multipart/form-data'
             }
         }
     //创建axios实例 (配置 : 过期时间 ,是否携带cookie)
     const axiosAjax = this.$axios.create({
             timeout: 1000 * 60, // 时间s
             withCredentials: true // 跨域携带cookie
        })
     //发文件上传请求 传参formData文件对象 config请求头配置
     const result = await axiosAjax.post( '/uploadPhoneImg',
             formData,
             config
         )
     //返回值不为null && isSuc==='1'
     if (result != null && result.data.isSuc === '1') {
         //清空文件对象中文件相关信息
         file.file = '';
         if (this.flag) {
             this.$dialog.alert({
                message: '上传成功'
             })
         }
         //清空图片预览列表
         this.fileList=[];
         //调用获取图片函数
         this.querybefore();
     } else {
         // 返回值不为null && isSuc==='1' 条件之一不成立 上传文件失败
         this.$dialog.alert({
             title: '温馨提示',
             message: result.data.msg
         })
 		}
 	},
     hiddenList () {
         for (const key in this.showList) {
            this.showList[key] = false
         }
     }
 }
</script>