图片上传（vue实现base64和form表单上传图片，并附代码）

关于前端上传图片应该很普遍，我分享下我常用的两种图片上传方式
话不多少直接粘代码：
1.form提交

html内容

<form ref="form" enctype="multipart/form-data">
            <input type="file" @change="update" class="header_img" style="width: 1.8rem; height:1.8rem;opacity:0;z-index: 999;position:absolute;top: 0.8rem;left:40%" id="upload" accept="image/png,image/gif,image/jpeg" multiple >
            <img src="../../assets/img/icon_add.png" alt="" style="position: absolute;left: 40%;">
            <img v-if="alipay.alipay_code == ''" :src="gather_img" alt="" class="header_img" style="width: 2.4rem;height:2.4rem;position: absolute;z-index: 99;left: 38%;top: 0.5rem;border: none;">
            <img v-else :src="alipay.alipay_code" class="header_img" alt=""  style="width: 2.4rem;height:2.4rem;position: absolute;z-index: 99;left: 38%;top: 0.5rem;border: none;">
          </form>

js

 update(e){
          var that = this
          let file = e.target.files[0];
          // console.log(file);
          var str = 'alipay'
          let param = new FormData() // 创建form对象
          param.append('file', file)
          param.append('folder', str)// 通过append向form对象添加数据
          param.append('chunk', '0')// 添加form表单中其他数据
          let config = {
            headers:{'Content-Type':'multipart/form-data','authorization':localStorage.token}
      } // 添加请求头
          this.$axios.post(接口地址,param,config)
            .then(response=>{
              // console.log(response.data);
              if (response.data.code == 200){
                this.gather_img = this.global.path + '/uploads/' + response.data.data
                // console.log(this.gather_img);
                this.$layer.msg('上传成功')
              }else{
                this.$layer.msg('上传失败')
              }
            })
        },

form完毕

2.base64上传
html内容

 <div class="header_detail" style="position: relative">
          <span class="header_name">头像(点击更换)</span>
          <input type="file" @change="photoChange($event)" class="header_img" style="height: 100%;opacity:0;z-index: 999;position:absolute" id="upload_file" multiple >
          <img :src="header_img" alt="" class="header_img">
          <!--<img :src="dataURL" alt="" class="header_img">-->
        </div>

js内容

photoChange (el) {
      var _this = this
      // 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)
      var file = event.target.files[0]
      console.log(file)

      // 选择的文件是图片
      if (file.type.indexOf('image') === 0) {
        // 压缩图片需要的一些元素和对象
        var reader = new FileReader(),
          // 创建一个img对象
          img = new Image()

        reader.readAsDataURL(file)
        // 文件base64化，以便获知图片原始尺寸
        reader.onload = function (e) {
          img.src = e.target.result
        }
        // base64地址图片加载完毕后执行
        img.onload = function () {
          // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
          var canvas = document.createElement('canvas')
          var context = canvas.getContext('2d')

          // 图片原始尺寸
          var originWidth = this.width
          var originHeight = this.height

          // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
          var maxWidth = 250,
            maxHeight = 250
          // 目标尺寸
          var targetWidth = originWidth,
            targetHeight = originHeight
          // 图片尺寸超过300x300的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更宽，按照宽度限定尺寸
              targetWidth = maxWidth
              targetHeight = Math.round(maxWidth * (originHeight / originWidth))
            } else {
              targetHeight = maxHeight
              targetWidth = Math.round(maxHeight * (originWidth / originHeight))
            }
          }
          // canvas对图片进行缩放
          canvas.width = targetWidth
          canvas.height = targetHeight
          // 清除画布
          context.clearRect(0, 0, targetWidth, targetHeight)
          // 图片压缩
          context.drawImage(img, 0, 0, targetWidth, targetHeight)
          /* 第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高 */

          // 压缩后的图片转base64 url
          /* canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
           * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92 */
          var dataURL = canvas.toDataURL('image/jpeg', 0.7)// base64 格式
          console.log(dataURL)

          var blod = _this.dataURItoBlob(dataURL)       //转二进制
          console.log(blod)
          var formdata = new FormData();
//下面是要传递的参数
//           formdata.append('type', this.type);
            formdata.append('pic', blod);
//此处必须设置为  multipart/form-data
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data' //之前说的以表单传数据的格式来传递fromdata
            }
          };
          _this.$axios.post( _this.global.path + '/index/Mine/get_picture?token=' + localStorage.token, formdata, config).then((res) => {
            console.log(res)
              if (res.data.code == 200) {
                _this.header_img = res.data.data
                _this.$layer.msg(res.data.message)
              } else if (res.data.code === 300) {
                this.$layer.msg(res.data.message)
                var storage = window.localStorage
                storage.clear()
                this.$router.push('/login')
              } else {
                _this.$layer.msg(res.data.message)
              }
          })
    },

base64转二进制

    dataURItoBlob (dataURI) {
      // base64 解码
      let byteString = window.atob(dataURI.split(',')[1]);
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      let T = mimeString.split('/')[1]
      let ab = new ArrayBuffer(byteString.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], {type: mimeString});
    },

base64完毕这就是一个小白常用的两种上传图片方式。