[JavaScript知识库]axios FormData图片上传

<div class="btnUploaddiv" >
     编辑封面
      <input ref="file" class="btnUpload1"  name="myFile" multiple="multiple" type="file" @change="uploadImg" />
</div>

async uploadImg() {//上传图片
        var file = this.$refs.file.files[0]
        var formData = new FormData()
        formData.append('imgFile', file)
        const imgSize = await this.getImgSize(file)
        playlistCoverUpdate(this.$route.query.id,imgSize.width,0,0,formData,new Date()).then(res => {//封装好请求
          if(res.data.code === 200){
          this.imageUrl = res.data.url
          }
        })
      },
      getImgSize(file) {
        return new Promise((resolve, reject) => {
          let reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = function (theFile) {
            let image = new Image()
            image.src = theFile.target.result
            image.onload = function () {
              resolve({
                width: this.width,
                height: this.height,
              })
            }
          }
        })
      },

.btnUpload
  cursor: pointer;
  outline: medium none;
  border: medium none;
  width: 110px;
  opacity: 0;
  z-index: 2;
  padding-bottom: 20px;
  position: absolute;
  height: 18px;
  right:48px;
.btnUploaddiv
  background-color:#FFFFFF;
  width: 80px;
  text-align: center;
  line-height: 35px;
  color: black;
  border-radius: 20px;
  border: 1px solid #bbbbbb;
  font-size 15px
  margin-left  50px

axios封装

export function playlistCoverUpdate(id,imgSize,imgX,imgY,formData,timestamp) {
  return request({
    url: "/playlist/cover/update",
    params:{
      id:id,//歌单id
      imgSize :imgSize ,//图片尺寸,默认为 300
      imgX : imgX,//水平裁剪偏移,方形图片可不传,默认为 0
      imgY : imgY,//垂直裁剪偏移,方形图片可不传,默认为 0
      timestamp:timestamp//
    },
    method: 'post',
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖