美文网首页
原生input上传图片

原生input上传图片

作者: 小小_128 | 来源:发表于2022-01-07 19:00 被阅读0次
<input type="file" accept="image/jpg, image/jpeg, image/png" @change="onRead" />

// 读取文件后
onRead(file) {
  console.log('file', file)
  let fileObj = file.target.files[0];
  // h5上传人脸大小限制由客户端做(客户端选择照片后会有压缩过程)
  let maxSize = 15*1024*1024; //15M
  if (fileObj.size > maxSize) {
    this.$vux.toast.show({
      text: '上传的图片大小不能超过15M!',
      type: 'text',
      position: 'middle'
    });
    this.fileList = []
    return;
  }
  let formData = new FormData();
  formData.append('file', fileObj);
  formData.append('name', fileObj.name);
  this.axios.post(this.apiNames.apiImgUpload, formData).then(res => {
    this.$vux.loading.hide();
    if (res.recode === 200) {
      this.nucleicPicUrl = res.data;
    } else {
      this.fileList = []
      this.$vux.toast.show({
        text: res.msg,
        type: 'text',
        position: 'middle'
      });
    }
  });
}

相关文章

网友评论

      本文标题:原生input上传图片

      本文链接:https://www.haomeiwen.com/subject/eatscrtx.html