element ui文件或者图片上传（包括自定义上传）

概要

element ui文件或者图片上传

使用方法

引入elementui 使用element ui 上传文件组件 下面是一图片为例

  <el-form-item label="照片：">
        <el-upload
           ref="upload"
           class="upload-demo upload_bg"
           :action="uploadImg" 
           :on-success="handleAvatarSuccess"
           :on-preview="handlePictureCardPreview"
           :before-upload="handleBefore"
           :on-remove="handleRemove"
           :on-change="handleImgChange"
           :file-list="imgList"
           list-type="picture-card"
           multiple
           :limit="6"
           :on-exceed="handleExceed"
           :auto-upload="false"
           >
             <i slot="default" class="el-icon-plus"></i>
             <div slot="tip" class="el-upload__tip">
                  上传图片,大小不超过4M。
             </div>
      </el-upload>
 </el-form-item>

:action="uploadImg" uploading : 上传图片地址 例如：'http://xx.xxx.xxx.xxx:xxxx/api/fileUpLoad/images
:before-upload 图片上传之前拦截

  // 图片上传之前拦截
    handleBefore(file) {
      if (file.size >= 4000000) {
        this.$baseMessage('图片过大，不要超过4M', 'error')
        return false
      }
    },
    // 文件状态改变时候回调
    handleImgChange(file, fileList) {
      if (file.status === 'ready') {
        this.readyState++
      } else {
        this.readyState--
      }
    },
    // 上传图片成功之后的回调
    handleAvatarSuccess(response, file, fileList) {
      let that = this
      this.num += 1
      let obj = {
        code: '',
        id: 0,
        url: '',
        fileName: '',
        shortUrl: '',
      }
      obj.url = file.response.response[0]
      obj.shortUrl = file.response.response[0]
      obj.fileName = file.name
      that.form.accidentFiles.push(obj)
      if (that.num === that.readyState) {
        // 提交数据
        if (that.form.id) {
          that._doEdit(that.form.id)
        } else {
          that._doCreate()
        }
      }
    },

    // 删除上传的照片
    handleRemove(file, imgList) {
      if (file.status === 'success') {
        let len = this.form.accidentFiles.length
        let dels = -1
        for (let i = 0; i < len; i++) {
          if (this.form.accidentFiles[i].id === file.id) {
            dels = i
          }
        }
        if (dels !== -1) {
          this.form.accidentFiles.splice(dels, 1)
        }
      } else if (file.status === 'ready') {
        this.readyState--
      }
    },
    // 图片放大预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传文件超过6个
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 6个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },

自定义上传

<el-upload
                ref="upload"
                action="uploadImg"
                accept=".txt, .txts, .pdf, .docx,.xlsx, .xls, .jpg, .jpeg, .png"
                :on-remove="handleRemove"
                :on-change="handleImgChange"
                :file-list="imgList"
                :on-preview="handlePreview"
                :http-request="handUploadFile"
                :before-upload="handleBefore"
                :limit="6"
                multiple
                :on-exceed="handleExceed"
                :auto-upload="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  <!-- 上传附件,大小不超过4M。 -->
                </div>
              </el-upload>

 // 文件状态改变时候回调
    handleImgChange(file, fileList) {
      if (file.status === 'ready') {
        this.readyState++
      }
      // else {
      //   this.readyState--
      // }
    },
    // // 图片上传之前拦截
    handleBefore(file) {
      let objs = {
        fileName: changeTimes(new Date()) + '-' + file.name,
      }
      return new Promise((resolve, reject) => {
        getFileUrl(objs).then(({ response }) => {
          this.uploadImg = response      //调后台接口获取文件上传路径
          resolve(response)
        })
      })
      // if (file.size >= 4000000) {
      //   this.$baseMessage('附件过大，不要超过4M', 'error')
      //   return false
      // }
    },
    handUploadFile(res) {
      let shortUrl = changeTimes(new Date()) + '-' + res.file.name
      let fileName = res.file.name
      let uploadImg = this.uploadImg
      this.num += 1
      FileConvertBase(res.file)
        .then((res) => {
          uploadRequest(uploadImg, 'put', dataURItoBlob(res))
          //这种情况下只能使用put方式
            .then((res) => {
              this.readyState--
              let obj = {
                code: '',
                id: 0,
                fileName: fileName,
                shortUrl: shortUrl,
              }
              this.form.contractFiles.push(obj)
              if (this.readyState === 0) {
                // 提交数据
                if (this.form.id) {
                  this._doEdit(this.form.id)
                } else {
                  this._doCreate()
                }
              }
            })
            .catch((res) => {
              this.Loading.close()
            })
        })
        .catch((res) => {
          this.Loading.close()
        })
    },
    // 删除
    handleRemove(file, imgList) {
      if (file.status === 'success') {
        let len = this.form.contractFiles.length
        let dels = -1
        for (let i = 0; i < len; i++) {
          if (this.form.contractFiles[i].id === file.id) {
            dels = i
          }
        }
        if (dels !== -1) {
          this.form.contractFiles.splice(dels, 1)
        }
      } else if (file.status === 'ready') {
        this.readyState--
      }
    },
    // 上传文件超过6个
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 6个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },

封装请求接口

import axios from 'axios'
import {
  baseURL,
  // requestTimeout,
} from '@/config'
const instance = axios.create({
  baseURL,
  // timeout: requestTimeout,
  headers: {
    'Content-type': 'multipart/form-data',
  },
})

export default function (url, method, data) {
  return new Promise((resolve, reject) => {
    instance({
      url,
      method,
      data
    }).then(res => {
      resolve(res)
    })
  })
}

上传文件格式转换

// file文件转换为base64，得到base64格式图片
function FileConvertBase(file) {
  if (!file) return
  return new Promise((resolve, reject) => {
    try {
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function () {
        resolve(reader.result)
      };
    } catch (err) {
      console.log(err);
      reject(err)
    }
  })
}

// base64转换为blob流
function dataURItoBlob(base64Data) {
  //console.log(base64Data);//data:image/png;base64,
  var byteString
  if (base64Data.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(base64Data.split(',')[1]) //base64 解码
  else {
    byteString = unescape(base64Data.split(',')[1])
  }
  var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0] //mime类型 -- image/png

  // var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
  // var ia = new Uint8Array(arrayBuffer);//创建视图
  var ia = new Uint8Array(byteString.length) //创建视图
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  var blob = new Blob([ia], {
    type: mimeString,
  })
  return blob
}

export {
  FileConvertBase,
  dataURItoBlob
}