Vue实现上传图片

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

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

一、页面显示代码

           //提示语句
            
{{placeholder}}
            

              

              //预览图片
                

                  
                
                //删除图片的按钮
                
              
            
            
            
          

二、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
    }

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

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