上传图片

网络

Html

  <el-button @click="mockClike" size="small">上传设备照片</el-button>
  
  <input v-show="false" ref="imgFile" type="file" name="file" accept="image/png,image/jpeg" @change="uploadImage" />

Api

export const UploadImage = (formData) => {
  return request({
    url: "index/UploadImage",
    method: "POST",
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data' //指定类型
    }
  })
}

图1

Js

    mockClike() {
      this.$refs.imgFile.click(); //模拟点击input上传
    },
    
    async uploadImage(e) {
      const file = e.target.files[0];
      console.log(file);//打印出来如图1

      const formData = new FormData();
      formData.append("image", file); //这里的image是指定文件格式,需和后台一样

      const res = await UploadImage(formData);
      console.log(res);
    },

上传成功