axios实现图片的上传

实现上传的方法

import axios from "axios";
import { UPLOAD_IMG_URL } from "api/config";

let post_config = {
  headers: {'Content-Type': 'multipart/form-data'}
};

function uploadImg(param) {
  return axios.post(UPLOAD_IMG_URL, param, post_config).then((res) => {
    return Promise.resolve(res.data);
  }).catch((err) => {
    return Promise.reject(err);
  });
}

export default uploadImg;

实现单张上传

<input type="file" name="imgfile" 
accept="image/png,image/gif,image/jpeg,image/jpg" @change="uploadImg">

import uploadImg from "api/uploadImg";

// 单张图片最大字节2M
const MAX_SIZE = 2 * 1024 * 1024;

methods: {...}
checkType(type) {
  let allowType = ['image/jpeg', 'image/gif', 'image/jpg', 'image/png'];
  if (allowType.includes(type)) {
    return true;
  } else {
    return  false;
  }
},
uploadImg(e) {
  let file = e.target.files[0];
  let param = new FormData();
  if (!this.checkType(file.type)) {
    window.alert('上传的图片必须是图片类型！');
    return;
  }
  if (file.size > MAX_SIZE) {
    window.alert('上传的图片尺寸不能超过2M！');
    return;
  }
  // param.append（‘表单字段名’, 字段对应的内容） 提交图片和文章id
  param.append('imgfile', file);
  param.append('id', ID);

  uploadImg(param).then(res => {
    setTimeout(() => {
      if (res.error === 0) {
        // 上传成功
        console.log(res)
      } else {
        window.alert(res.msg);
      }
    }, 1000);
  });
}

实现多张上传

<input type="file"
       name="imgfile[]"
       multiple="multiple"
       accept="image/png,image/gif,image/jpeg,image/jpg"
       @change="uploadImg"
       title="一次最多可上传5张图片"
>

import uploadImg from "api/uploadImg";
// 单张图片最大字节2M
const MAX_SIZE = 2 * 1024 * 1024;
// 一次最多图片上传个数
const MAX_COUNTS = 5;

methods: {..}
checkType(type) {
  let allowType = ['image/jpeg', 'image/gif', 'image/jpg', 'image/png'];
  if (allowType.includes(type)) {
    return true;
  } else {
    return  false;
  }
},
checkImgs(fileArr) {
  let res = true;
  if (fileArr.length > MAX_COUNTS) {
    window.alert('抱歉，一次最多上传5张图片，请重新选择!');
    return false;
  }
  // 有一张图片不合格就返回false
  for (let i = 0;i < fileArr.length;i++) {
    let file = fileArr[i];
    if (!this.checkType(file.type)) {
      window.alert(file.name + '：文件必须是图片类型！');
      res = false;
      break;
    }
    if (file.size > MAX_SIZE) {
      window.alert(file.name + '：图片尺寸不能超过2M！');
      res = false;
      break;
    }
  }
  return res;
},
uploadImg(e) {
  let checkOk = this.checkImgs(e.target.files);
  if (!checkOk) { return;}
  // 将类数组转化为数组
  let fileArr = Array.from(e.target.files);
  let param = new FormData();
  // param.append（‘表单字段名’, 字段对应的内容） 提交图片和文章id
  // 这里需要使用循环 注意是字段名是imgfile[]代表一个数组
  fileArr.forEach(file => {
    param.append('imgfile[]', file);
  });
  param.append('id', ID);

  uploadImg(param).then(res => {
    setTimeout(() => {
      console.log(res)
      if (res.error === 0) {
        // 上传成功向外发送返回的包含所有链接的数组
        console.log(res.data);
      } else {
        window.alert(res.msg);
      }
    }, 1000);
  });
}

param.append('id', ID);相当于每个input的name属性。

打印e.target.files,结果如下（分别为一张与多张的情况）

关于配合前端axio上传图片的后台我写了一个简易的脚本，可以在本地进行测试，请见附件。

附件下载