vue + element 图片上传

vue-cli3 + element 图片上传，图片上传前验证格式，自定义上传;

1. el-upload组件

  <el-upload
        class="upload-demo"
        action="/uploadImg"
        :file-list="bankImgList"
        list-type="picture"
        :http-request="uploadAccountBank"
        :before-upload="beforeUpload">
        <el-button type="primary">点击上传</el-button>
   </el-upload>

2. 验证图片格式

 //   上传图片前的验证只能是jpg格式的图片
   beforeUpload(file) {
      const isJpg = file.type === 'image/jpeg' ? true : file.type === 'image/jpg' ? true : false;
      if (!isJpg) {
        this.$message.error('请选择jpg或jpeg格式的文件!');
      }
      return isJpg;
    },

3. 上传

async function uploadImage(a) {
  // 图片是否上传成功
  let uploadSuccess = false;
  // 图片id
  let id = 0;
  let fromData = new FormData();
  fromData.append('file', a.file);
  // htpp是封装后的axios
  await http({
    method: 'post',
    url: `/v1/uploadImg`,
    data: fromData,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  }).then((res) => {
    uploadSuccess = true;
    id = res.data.data.img_id;
  });
  if (uploadSuccess) {
    return id;
  }
}

4. 使用（uploadImage返回一个promise）

   uploadAccountBank(a) {
      this.uploadImage(a).then((id) => {
        this.img_id = id;
      });
    },

来源：oschina

链接：https://my.oschina.net/clearcode/blog/4885952