因公司项目需求，在原有的项目基础页面添加一个上传图片的功能。随时百度一波但是实现的功能却状况百出，上传图片前需对图片进行截取和压缩，转换为二进制等一系列操作
1、未上传图片时显示的内容

2、上传完成现实的图片内容(可左右滑动)

一、页面显示代码

<div class="img-uploader" @drop="handleDrop" ref="uploader" v-if="!showImg">
           //提示语句
            <p class="img-uploader-placeholder" v-if="!hasImages">{{placeholder}}</p>
            <div v-if="hasImages" class="img-uploader-preview-list">
              <div v-for="(data,index) in imageDataList" class="img-uploader-preview" :key="index">
              //预览图片
                <div class="preview-img">
                  <img :src="data">
                </div>
                //删除图片的按钮
                <img
                  src="@/assets/round_close.svg"
                  class="img-uploader-delete-btn"
                  @click="deleteImg(index)"
                >
              </div>
            </div>
            <label :for="inputId" class="img-uploader-label" v-if="!hasImages"></label>
            <input
              style="display: none"
              :id="inputId"
              ref="input"
              type="file"
              accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
              multiple="multiple"
              @change="handleFileChange"
            >
          </div>

二、js方法（方法不完整此仅参考）

三、后台要求穿过去的图片格式为：base64格式编码转换为二进制且以数组的形式传递给后台。代码如下：

//图片的base64格式编码转换为二进制，baseurl：图片base64的格式编码
    binarySystem (baseurl) {
      let arr = baseurl.split(',')
      baseurl = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      let nameImg = []
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
        nameImg.push(bstr.charCodeAt(n))
      }
      return nameImg
    }

四、图片上传成功即可查看传进接口的数据
若数据传进后台接口即表示图片上传成功(如上图显示图片)！

大致思路即为如此，可百度自行下载相关代码！
此文仅供参考，不喜勿喷！谢谢